Search code examples
javascriptreactjsreact-routersemantic-uisemantic-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>
Solution

  • You need use the SUIR's augmentation:

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