React-Router active class 不适用于嵌套路由

Question

我查看了几个 github 问题和类似的帖子，但我无法弄清楚。我的路线在这里：

  <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>

以下是感兴趣的链接：

<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>

链接加载得很好，但它们从未获得活动 class CSS。只有加载的第一条路线得到它，没有别的。有人有什么想法吗？

Answer 1

您可以使用 componetDidMount

而不是 onEnter

好的一面是，您还可以将它与 componentWillUnmount 一起使用，例如删除计时器或清除缓存。

我希望这对您有所帮助，这里有一些关于这个主题的额外信息:) https://facebook.github.io/react/docs/component-specs.html#mounting-componentdidmount

Answer 2

所以，这个问题被问到已经有一段时间了，但我想出了答案，所以我应该分享一下。

在呈现组件并接收导航状态更新的容器中，我需要将 {pure: false} 放入连接函数中。本质上它与这样一个事实有关，即如果您的组件不是 "pure"（更新仅来自 props），那么它依赖于反应上下文来重新渲染。这是代码块：

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

问题的文档：https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md

帮我解决的问题：https://github.com/ReactTraining/react-router/issues/3286

React-Router active class 不适用于嵌套路由

React-Router active class is not working for nested routes

javascript

router

jsx

reactjs

react-router