user3142695 user3142695 - 4 years ago 207
React JSX Question

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

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>

Answer Source

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={...} >

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download