Semantic UI (React): How to use Link components in Menu.List elements

Question

I'm trying to get a semantic ui (react) menu list, which should be working with react router, which means I would like to use the Link component of react router

If I use this...

<Menu.Item name='profile'>
    <Icon name='user' />
    My profile
</Menu.Item>

...it gives me the result:

<a class="item">
    <i aria-hidden="true" class="user icon"></i>
    My profile
</a>

But I would like to get something like

<Link to='profile'>
    <i aria-hidden="true" class="user icon"></i>
    My profile
</Link>

This one doesn't work, as the syntax is wrong:

<Menu.Item name='profile' as={ <Link to='profile' /> }>
    <Icon name='user' />
    My profile
</Menu.Item>

score 85 · Accepted Answer · edited Oct 04 '18 at 09:36

85

You need use the SUIR's augmentation:

<Menu.Item as={ Link } name='profile' to='profile'>
  <Icon name='user' />
  My profile
</Menu.Item>

edited Oct 04 '18 at 09:36

its4zahoor

1,227
1
11
17

answered Feb 07 '17 at 09:47

Oleksandr Fediashov

3,967
1
20
40

11

This also works with Button Like `` – alassiter Oct 26 '17 at 17:33
1

Agree this is the best answer. Less code and allows you to retain theme styling. – mojave May 28 '18 at 17:59
One note: Since the API has changed 'My profile' (String) needs to be wrapped inside a tags. Like this My profile – Vinod Sobale Nov 08 '18 at 07:24
Great, thanks! Any idea how to pass a method? I need to include DELETE method in my link – alikk Mar 04 '19 at 03:42

Abdennour TOUMI · Answer 2 · 2017-02-07T03:38:43.920

7

Use browserHistory.push instead ; It was provided also by react-router as an alternative of Link but non-markup :

import {browserHistory} from 'react-router';

redirect(to) {
    browserHistory.push({
       pathname: to
    });
} 
//......
<Menu.Item name="profile" onClick={this.redirect('/profile')}
    <Icon name='user' />
    My profile
</Menu.Item>

If you want to get /profile from name props , change the line by :

<Menu.Item name="profile" onClick={(event, itemProps) => this.redirect(itemProps.name)}

And if so , <Menu onItemClick={...} > is better than <Menu.item onClick={...} >

edited Feb 07 '17 at 03:38

answered Feb 07 '17 at 03:28

Abdennour TOUMI

64,884
28
201
207

Is there a difference between using `browserHistory.push({ pathname: to });` and `browserHistory.push(to);`? – user3142695 Feb 07 '17 at 03:53
It support [both](https://github.com/ReactTraining/react-router/blob/master/docs/API.md#pushpathorloc) however, `{pathname:to}` is better if you want to pass `query` also as well as other params – Abdennour TOUMI Feb 07 '17 at 05:14

Semantic UI (React): How to use Link components in Menu.List elements

2 Answers2