Semantic-ui-react: 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? :grin:

[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?

[m-adil]

But how can we achieve active style with that as - to?

[ThisIsRuddy]

@m-adil I am also looking for a solution to this, although I believe the problem is with the onClick being overridden by the Link component changing the route and not continuing on to complete the Menu.Item onClick prop.

Any suggestions?

<Menu pointing>
    <Menu.Item as={Link} to="/" name='home' active={this.state.activeItem === 'home'} onClick={this.handleItemClick}/>
    <Menu.Item as={Link}  to="/products" name='products' active={this.state.activeItem === 'products'} onClick={this.handleItemClick}/>
</Menu>

[m-adil]

@ThisIsRuddy Yeah. I also didn't get any fix for <Menu.Item> yet but in order to achieve the functionality, I've adopted NavLink from react-router-dom. Hope this would help.

[ThisIsRuddy]

Ah I will have a look when I'm back later on today but I think a better
way would be to check the current url slug to set the active flag rather
than relying on the onclick event

On Sat, 3 Feb 2018, 12:07 Adil Mazhar, [e-mail] wrote:

@ThisIsRuddy https://github.com/thisisruddy Yeah. I also didn't get any
fix for yet but in order to achieve the functionality, I've
adopted NavLink from react-router-dom
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/NavLink.md#navlink.
Hope this would help.

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/Semantic-Org/Semantic-UI-React/issues/142#issuecomment-362801463,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABrfk_Fkr67QtJp3p_dQH4EElsVxBqGTks5tREwYgaJpZM4G_39G
.

[duanefields]

NavLink works

<Menu.Item as={NavLink} to="/messages" content="Messages"/>

But, as you navigate it doesn't re-evaluate the state of the menus, so the active indicator only changes if you reload the page

[brianespinosa]

@ThisIsRuddy @m-adil To be clear, NavLink(RR4) is adding an "active" class to a link that is active. You can achieve this with a Link (< RR3) by using an activeClassName='active' prop. This activeClassName prop is also available on NavLink if you wanted to add a different class than "active". There is nothing being done to the state inside of your component. Your NavLink is just matching your route and adding a css class.

[entrptaher]

@duanefields @ThisIsRuddy @m-adil,
Here is my solution which worked well for me with RR4,

If you don't pass exact and other props like activeClassName, you are not going to have the active state properly. Also you don't have to worry about active={this.activeState === 'home'} or such hacks anymore.

const Nav = props => (
    <NavLink
        exact
        {...props}
        activeClassName="active"
    />
);

Use it like below. Less code, less clutter.

const Navigation = () => (
    <Menu secondary>
        <Menu.Item as={Nav} to="/" name="home" />
        <Menu.Item as={Nav} to="/about" name="messages" />
        <Menu.Item as={Nav} to="/sample" name="friends" />
    </Menu>
);

Preview:

[duanefields]

@entrptaher I ended up just wrapping it with "withRouter" and that fixed it

import React, { Component } from 'react'
import { Container, Image, Menu } from 'semantic-ui-react'
import { NavLink, withRouter } from 'react-router-dom'
import { observer, inject } from 'mobx-react'

@inject('UIStore')
@observer class NavigationMenu extends Component {
  render() {
    let user = this.props.UIStore.user
    return (
      <Menu fixed='top' inverted>
        <Container>
          <Menu.Item header>
            <Image
              size='mini'
              src={`${process.env.PUBLIC_URL}/glg-logo-white.png`}
              style={{ marginRight: '1.5em' }}
            />
            Postmaster
          </Menu.Item>

          <Menu.Item as={NavLink} exact to="/" content="Status"/>
          <Menu.Item as={NavLink} to="/queue" content="Hold Queue"/>
          <Menu.Item as={NavLink} to="/messages" content="Messages"/>
          <Menu.Item as={NavLink} to="/stats" content="Stats"/>

          { user && (
            <Menu.Menu position="right">
              <Menu.Item name={user.name} content={user.name}/>
            </Menu.Menu>
          )}

        </Container>
      </Menu>
    )
  }
}

export default withRouter(NavigationMenu)