Issue with Menu.Item NavLink always active Semantic UI React

Question

I am using semantic ui react and I am using NavLink with Menu.Item for routing.

Below is my navbar component:

const Navbar = () => (
  <div>
    <Container>
      <Menu secondary stackable widths={4}>
        <Menu.Item>
          <img src={Logo} alt="header" />
        </Menu.Item>
        <Menu.Item as={NavLink} to="/" name="home">
          <Icon name="home" size="large" />
          <p>Home</p>
        </Menu.Item>
        <Menu.Item as={NavLink} to="/data" name="data">
          <Icon name="dashboard" size="large" />
          <p>Dashboard</p>
        </Menu.Item>
        <Menu.Item as={NavLink} to="/user" name="user">
          <Icon name="user" size="large" />
          <p>User</p>
        </Menu.Item>
      </Menu>
    </Container>
  </div>
);

Now here is where the issue resides. The routing works fine but for some reason the 'Home' Menu Item is always active.

However the other two routes work fine (i.e. are only set 'active' when route is correct)

Here is what it looks like with /dashboard route active

The code for the routes in my App.jsx:

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/data" component={Dashboard} />
    <Route path="/user" component={User} />
</Switch>

The photo above should give you a clear indication of the issue!

Any input would be appreciated!!

<Menu.Item as={NavLink} exact to="/" name="home"> add exact prop to your Menu Item — AngelSalazar
– AngelSalazar, Commented Mar 20, 2018 at 23:00
@AngelSalazar Thanks my friend just ran into this behavior! And you solved it! — Antonio Pavicevac-Ortiz
– Antonio Pavicevac-Ortiz, Commented Nov 6, 2019 at 16:50

dwalsh · Accepted Answer · 2018-03-20 23:03:33Z

5

Can confirm as from AngelSalazar above, this fixes it. Thank you!

<Menu.Item as={NavLink} exact to="/" name="home">

answered Mar 20, 2018 at 23:03

dwalsh

1451 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miguel Stevens Over a year ago

It's only working for me if the Navigation component has state set in MapStateToProps, that shouldn't be the case right?

Roger Perez · Accepted Answer · 2018-06-20 19:30:01Z

Here is the setup that I have that helped fix the issue. I was getting the following error:

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink (created by MenuItem)
in MenuItem (at NavBar.js:47)
in a (created by Link)
in Link (created by Route)
in Route (created by NavLink)
in NavLink (at NavBar.js:46)
in div (created by Menu)
in Menu (at NavBar.js:20)
in NavBar (at App.js:26)
in div (at App.js:25)
in Router (created by BrowserRouter)
in BrowserRouter (at App.js:24)
in div (at App.js:22)
in App (at index.js:6)

The main component setup was in App.js where I was doing my routing

 <Router>
      <div>
      <NavBar />
      <Route exact path="/" component={LoginSignUpContainer}></Route>
<Router>

Here I have my NavBar component which holds the and where I was having the issue.

class NavBar extends Component{
 constructor(){
    super();

    this.state={
        activeItem: "home"
    }
}
handleItemClick = (e, { name }) => this.setState({ activeItem: name })


render() {
const { activeItem } = this.state

return (
  <Menu>
     <NavLink to="/bills">
    <Menu.Item
      name='bills'
      active={activeItem === 'bills'}
      onClick={this.handleItemClick}>
      <Icon name="payment"/>Bills
    </Menu.Item>

  <Menu>

I removed the NavLink tags and within the Menu.Item tags I added:

 as={NavLink}
 to="bills"

After update:

<Menu.Item
    as={NavLink}
    to="/bills"
    name='bills'
    active={activeItem === 'bills'}
    onClick={this.handleItemClick}>
  <Icon name="payment"/>Login
</Menu.Item>

Collectives™ on Stack Overflow

Issue with Menu.Item NavLink always active Semantic UI React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related