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>

链接加载很好，但它们永远不会获得活动类CSS。只有负载上的第一条路线才能获得它而没有别的东西。有人有什么想法吗？

Answer 1

您可以使用componetDidMount

代替onEnter

这里的好处是你也可以将它与componentWillUnmount一起使用，以便删除定时器或清除缓存。

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

Answer 2

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

在我的容器中，它呈现组件并接收导航的状态更新，我需要将doCreateInformationControl放在connect函数中。本质上它与如下事实有关：如果你的组件不是“纯粹的”（更新只来自props），那么它依赖于反应上下文来重新渲染。这是代码块：

{pure: false}

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

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

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

2 个答案: