CODEWITHSUNDEEP
htmlreactjs
Freestyle09
Freestyle09

Reputation: 5518

React - activeclass on root page

I'm creating simply navigation menu, and I want to have NavLinks to set property activeClassName to activated route. I have problem with root page. Whenever I click on other links, class Active is added properly, but from root NavLink active class is not being removed.

<ul className="container navigation right">
              <li>
                <NavLink activeClassName='active' to="/">Strona Domowa</NavLink>
              </li>
              <li>
                <NavLink  to="/galeria">Galeria</NavLink>
              </li>
              <li>
                <NavLink to="/kontakt">Kontakt</NavLink>
              </li>
            </ul>

Route

<Switch>
            <Route exact path="/" component={MMPStudio} />
            <Route exact path="/galeria" component={Gallery} />
            <Route exact path="/kontakt" component={Contact} />
            <Route exact path="/fotobudka" component={Fotobudka} />
            <Route exact path="/jubiler" component={Jubiler} />
            <Route
              exact
              path="/fotobudka/kontakt"
              component={FotobudkaContact}
            />
            <Route exact path="/jubiler/galeria" component={JubilerGallery} />
            <Redirect from="*" to="/" />
          </Switch>

Upvotes: 0

Views: 53

Answers (1)

Rodik
Rodik

Reputation: 4092

You need to specify exact on your NavLinks as well to make them match the exact url.

<NavLink activeClassName='active' exact to="/">Strona Domowa</NavLink>

From docs: https://reacttraining.com/react-router/web/api/NavLink/exact-bool

exact: bool

When true, the active class/style will only be applied if the location is matched exactly.

Upvotes: 3

Related Questions