CODEWITHSUNDEEP
javascriptreactjsreact-routerrouterjsx
minifigmaster125
minifigmaster125

Reputation: 175

React-Router active class is not working for nested routes

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?

Upvotes: 5

Views: 1377

Answers (2)

minifigmaster125
minifigmaster125

Reputation: 175

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

Upvotes: 2

Cobuz Alexandru
Cobuz Alexandru

Reputation: 322

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

Upvotes: 2

Related Questions