React-router has no active class

Question

I would like my <Link>s to have an active class when they match their route. Currently the resulting <a> tag doesn't change, even when I'm on the route referenced by the link.

My links are created like this: <Link to="/status">STATUS</Link>

The routes:

  <Router>
    <Route path='/' component={App}>
      <IndexRoute component={Status} />
      <Route path='about' component={About}/>
      <Route path='status' component={Status}/>
      <Route path='settings' component={Settings}/>
    </Route>
  </Router>

Does this feature even exist? If so, what do I need to change for it to work.

PS: I'm using react-router with redux-router. I also use the default HashHistory because it's a nwjs-app

score 4 · Accepted Answer · answered Feb 02 '16 at 22:58

4

Use the activeClassName property to specify the class to add when the link is active.

<Link to="/status" activeClassName="active">STATUS</Link>

answered Feb 02 '16 at 22:58

flurry

506
4
16

According to the API you should be right but it still doesn't work for me -.- Will try if an update helps. – cgross Feb 03 '16 at 09:06
Updating to react-router 2.0.0-rc5 fixed the issue, thanks. – cgross Feb 03 '16 at 10:04
Use `` instead. – Bugs Bunny Mar 27 '19 at 12:23

score 2 · Answer 2 · answered Sep 11 '17 at 20:30

I was having a similar problem with react-router-dom version 4.2.2. Instead of the Link component, I was able to use the NavLink component which includes the activeClassName prop.

From the documents:

NavLink: A special version of the that will add styling attributes to the rendered element when it matches the current URL.

Here is a code sample:

<ul className="menu col-sm-12">
  <li><NavLink to={`/events`} activeClassName="current">Events</NavLink></li>
</ul>

Note: activeClassName was removed from the Link component in React Router v4 (relevant answer).

React-router has no active class

2 Answers2