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>
You need use the SUIR's augmentation:
<Menu.Item as={ Link } name='profile' to='profile'>
<Icon name='user' />
My profile
</Menu.Item>
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={...} >
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With