Active link with React-Router?

by

This is an old, outdated answer for React Router v4

<Link> no longer has the activeClassName or activeStyle properties. In react-router v4 you have to use <NavLink> if you want to do conditional styling:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact activeClassName="is-active" to="https://stackoverflow.com/">Home</NavLink>
        <NavLink activeClassName="is-active" to='/about'>About</NavLink>
      </Nav>

      <Match pattern="https://stackoverflow.com/" exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

I added an exact property to the home <NavLink>, I’m fairly sure that without it, the home link would always be active since / would match /about and any other pages you have.

Leave a Comment