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

Posted 2023-02-21

【中文标题】React-Router 活动类不适用于嵌套路由

【英文标题】：React-Router active class is not working for nested routes

【发布时间】：2016-11-11 15:33:44

【问题描述】：

我查看了几个 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。只有加载的第一条路线得到它，没有别的。有人有什么想法吗？

【问题讨论】：

第一条路线是指/user/home 或'/'？

/user/home，或刷新页面时 url 中的任何路由

【参考方案1】：

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

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

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

【讨论】：

谢谢。当我偶然发现你的问题时，我正要发布同样的问题。

【参考方案2】：

你可以使用 componetDidMount 而不是 onEnter

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

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

【讨论】：

和这个问题有关系吗？

是的，而不是使用他提到的有问题的 activeClass，他可以直接在每个组件中使用 componentDidMount() 方法，他将确切知道从哪里加载了什么，以及卸载任何代码的选项他已启用。

但问题是，onEnter 应该对 activeClass 声明绝对没有影响。

它不应该，但我假设您遇到类似于 github.com/reactjs/react-router/issues/1996 的问题。这就是为什么我认为你有更好的选择直接使用 reactjs 基本组件来完成你的工作。不过，这只是一个建议，也许经过更多实验的开发人员会提出更好的解决方案。