React Router `Links` and `MenuItems`

[athurman]

ran into issues with trying to wrap MenuItems in react-router Links and vice-versa. Link components do not play nice with MenuItem components, because they are both rendered as a tags in the dom, here is how it looks when elements are rendered:

<a class="sd-menu-item Sidebar-linkIcon item active" data-reactid=".0.0.$=1$/=010.$=11.$link-3/=1$link-3">
  ::before
</a>
<a class="" href="/users" data-reactid=".0.0.$=1$/=010.$=11.$link-3/=1$link-3.2">
  <i class="users icon" data-reactid=".0.0.$=1$/=010.$=11.$link-3/=1$link-3.2.0"></i>
  <span class="Sidebar-linkText" data-reactid=".0.0.$=1$/=010.$=11.$link-3/=1$link-3.2.1">
    USERS
  </span>
</a>

this causes issues with styling, and breaks behaviors with MenuItem

[levithomason]

This should be handled in #319.

[levithomason]

This was solved by component augmentation, #414.

<Menu.Item as={Link} to='/home' />

See the docs for more.

[RobertShaw1]

This information was difficult to find. A google search to landed me here. Where can I find this information in the docs?

[layershifter]

This example can be found on the main page of docs 😞

[RobertShaw1]

Thanks!

Suggestion: Being that the concept of Augmentation "is essential for working with MenuLinks and react-router" can we at least include a link to the Augmentation documentation within the "See" list located at the top of to the Menu page? 😁

[hariDasu]

How can I do this in a card group passing down props? It is clear where to put the as {Link} for a menu item, but <Card.Group items={items} as={Link} to={items.map((item,i)=>(item.href))} /> doesn't seem to work. I know this is not stack overflow, so i will also post a formal question there. 😆

[tylerjw]

I have the same question as @hariDasu. Did you ever figure this out? I can't find your stack overflow question.

[layershifter]

@tylerjw I've answered it on SO

[hariDasu]

https://stackoverflow.com/questions/45427930/configuring-react-router-subroutes-with-react-semantic-ui-cardgroups/45457645#45457645

[levithomason]

Suggestion: Being that the concept of Augmentation "is essential for working with MenuLinks and react-router" can we at least include a link to the Augmentation documentation within the "See" list located at the top of to the Menu page? 😁

@RobertShaw1 this sounds like a great idea! I would even go for a PR that adds a React Router example. The docs already use React Router. Would you like to contribute the PR?