Semantic interface (React): using Link components in the menu. List items

Question

I am trying to get a list of semantic ui (react) menus that should work with a react router, which means that I would like to use the Link react router component

If I use this ...

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

... this 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 does not work because the syntax is incorrect:

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

Answer 1

Use browserHistory.push ; It was also provided by react-router as an alternative to Link , but without 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 the details /profile from name , change the line to:

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

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

Answer 2

You need to use SUIR augmentation :

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