React-Router活动类不适用于嵌套路由

minifigmaster125 发表于 Dev

第125章

我已经看过几个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>

链接可以很好地加载，但是它们永远不会获得活动类CSS。只有加载的第一条路线能够获得它，而没有其他任何东西。有人有什么想法吗？

第125章

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

在我的容器中，该容器呈现组件并接收导航的状态更新，我需要放入{pure: false}connect函数。本质上，它与以下事实有关：如果您的组件不是“纯”的（更新仅来自道具），则它依赖于响应上下文来重新渲染。这是代码块：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。