How can I style active Link in react-router v4?

javascript reactjs react-router react-router-v4
Ramtin Khalatbari picture Ramtin Khalatbari · Feb 4, 2017 · Viewed 81.6k times · Source

In react-router v3 we had activeStyle and activeClassName to style active Link

we could do something like this

  <div id="tags-container">
    {tags.map(t =>
      <Link
        className="tags"
        activeStyle={{ color: 'red' }}
        to={t.path}
      >
        {t.title}
      </Link>
    )}
  </div>

I wanna know how can I do same thing in v4?

Answer

Sergey Reutskiy picture Sergey Reutskiy · Feb 5, 2017

Use NavLink instead Link. Its not documented, but its work as you expect. https://github.com/ReactTraining/react-router/issues/4318

UPDATE 17.05.2017:

https://reacttraining.com/react-router/web/api/NavLink

Related questions

Nested routes with react router v4 / v5

I am currently struggling with nesting routes using react router v4. The closest example was the route config in the React-Router v4 Documentation. I want to split my app in 2 different parts. A frontend and an admin area. I was …

Read More
React Router with optional path parameter

I want to declare a path with an optional path parameter, hence when I add it the page to do something extra (e.g. fill some data): http://localhost/app/path/to/page <= render the page http://localhost/app/…

Read More
How to implement authenticated routes in React Router 4?

I was trying to implement authenticated routes but found that React Router 4 now prevents this from working: <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </…

Read More