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>