Semantic UI (React): How to use Link components in Menu.List elements
31,159
Solution 1
You need use the SUIR's augmentation:
<Menu.Item as={ Link } name='profile' to='profile'>
<Icon name='user' />
My profile
</Menu.Item>
Solution 2
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={...} >
Author by
user3142695
People who say nothing is impossible should try gargling with their mouths closed.
Updated on October 04, 2020Comments
-
user3142695 over 3 years
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 ofreact 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>