React-Router active class is not working for nested routes

Question

I've looked at several github issues and similar posts, and I can't figure this out. I have here my routes:

  <Router history={browserHistory}>
    <Route path='/' component={Main}>
      <IndexRoute component={Landing} />
      <Route path='login' component={LoginContainer} />
      <Route path='user' component={UserContainer} onEnter={checkAuth} >
        <Route path='home' component={HomeContainer} />
        <Route path='settings' component={SettingsContainer} />
        <Route path='doc_attributes' component={AttributesContainer} />
        <Route path='groups' component={GroupsContainer} />
        <Route path='rules' component={RulesContainer} />
      </Route>
      <Route path='/dropbox/auth_finish' onEnter={doDropbox} />
      <Route path='/box/auth_finish' onEnter={doBox} />
      <Route path='/googledrive/auth_finish' onEnter={doGDrive} />
      <Route path='/onedrive/auth_finish' onEnter={doOneDrive} />
    </Route>
  </Router>

Here are the links of interest:

<li><Link to='/user/home' activeClassName="activeLink"><i className="fa fa-home fa-3x fa-fw" aria-hidden="true"></i></Link></li>
<li><Link to='/user/settings' activeClassName="activeLink"><i className="fa fa-wrench fa-3x fa-fw" aria-hidden="true"></i></Link></li>
<li><Link to='/user/groups' activeClassName="activeLink"><i className="fa fa-users fa-3x fa-fw" aria-hidden="true"></i></Link></li>
<li><Link to='/user/rules' activeClassName="activeLink"><i className="fa fa-tasks fa-3x fa-fw" aria-hidden="true"></i></Link></li>

The links load just fine, but they never get the active class CSS. Only the first route on load gets it and nothing else. Anybody have any ideas?

Answer 1

Instead of onEnter you could use componetDidMount

The bright side here is that you can also use it with componentWillUnmount in order to remove timers for example or to clear cache.

I hope this helps, here's some extra info on this subject :) https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

Answer 2

So, it's been a while since this question was asked, but I figured out the answer so I should share it.

In my container which renders the component and receives the state updates for the navigation, I needed to put {pure: false} in the connect function. Essentially it has to do with the fact that if your component isn't "pure" (updates only comes from props) then it relies on react context to re-render. Here is the block of code:

const NavContainer = ReactRedux.connect( MapStateToProps, MapDispatchToProps, null, {pure: false} )(Nav)

Documentation for the issue: https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md

The issue which helped me solve it: https://github.com/ReactTraining/react-router/issues/3286