Why does my NavLink's doesn't set to active using Semantic-ui-react?

Question

I'm using combination of Semantic-UI-React and react-router-dom I have a Navigation Component with just 2 links.

They look like this (NavLink comes from react-router-dom):

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

When I click on the Protected Link on my site, the component loads and I'm on the /protected route. But the only link that is active is the Home NavLink.

I tried it with different variants. For example I added activeClassName="active" to both of them. I tried it with exact for all 2 or just one route. Nothing changes.

I found a related question: With React Semantic UI use NavLink to set active page class?

I tried it exactly like this, but it won't work on my site.

What could be the issue?

GeraltDieSocke · Accepted Answer · 2018-12-01 13:52:56Z

3

Solved:

My Navbar component wasn't connected to the router. I connected it with the withRouter helper from react-router-dom

That fixed the problem. Code looks like this now:

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

answered Dec 1, 2018 at 13:52

GeraltDieSocke

1,6284 gold badges26 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Why does my NavLink's doesn't set to active using Semantic-ui-react?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related