CODEWITHSUNDEEP
reactjsreact-routersemantic-ui
GeraltDieSocke
GeraltDieSocke

Reputation: 1618

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

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?

Upvotes: 2

Views: 379

Answers (1)

GeraltDieSocke
GeraltDieSocke

Reputation: 1618

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"
/>

Upvotes: 3

Related Questions