在嵌套导航上反应路由器活动状态答案

【问题标题】：react router active state on nested navigation在嵌套导航上反应路由器活动状态
【发布时间】：2017-01-10 14:49:14
【问题描述】：

我有一个 3 级导航系统、一个主要和一个辅助导航，以及页面上的可点击按钮。选择主导航中的链接时，将显示辅助导航项。选择次要导航项时，页面内容（导航下方）会发生变化，并显示不同的可点击按钮。选择可点击按钮时，按钮所在的区域（导航下方的内容）会发生变化，并会显示有关点击按钮的更多详细信息。

我正在使用 react 路由器来处理路由，我希望在单击按钮并且内容发生更改时，主要和次要导航项都保持选中状态。我正在使用<Link to='/..' /> 组件来处理活动链接，它适用于主导航（单击的项目保持选中状态）和辅助导航（当我单击辅助导航项目时，它保持选中状态并且页面上的按钮改变）。

但是当我单击更改按钮以显示更多详细信息时，不再选择辅助导航（第一个导航保持选中状态）

我的路线是这样的：

    <Route path='/main' component={Component} > // main nav items are here
      <IndexRoute component={Component} />
      <Route // secondary nav items are here
        path=':secondaryCategory'
        component={SecondaryCategory} // this component shows the buttons on the page />
      <Route // clicking on a button will bring the user to this route
        // but the secondaryCategory nav item that was selected gets de-selected
        path=':secondaryCategory/buttons/:buttonId'
        component={Buttons} />
    </Route>

secondaryCategory 是这里的问题（它是辅助导航），/main 有它的导航并且那个保持选中状态，当我选择主导航项时，辅助导航项保持选中状态，但是一旦我点击一个按钮，辅助导航不会保持其选定状态（但页面内容会相应更改，按钮消失，我会获得有关我单击的按钮的更多详细信息）

用于点击辅助导航项的链接元素是这样的：

      <Link
        to={`/main/${secondaryCategory}`} />

页面按钮上的链接如下所示：

    <Link
      to={`/main/${secondaryCategory}/buttons/${buttonId}`} />

当页面内容发生变化时，如何保持二级导航项处于选中状态？

【问题讨论】：

您没有包含它，但您使用activeClassName 或activeStyle 将您的<Link> 标记为活动，对吗？
@PaulS 是的，没错

标签： javascript reactjs react-router

【解决方案1】：

经过大量的尝试和错误，并阅读了一些博客/教程，我终于想出了解决方案：

<Route path='/main' component={Component} >
  <IndexRoute component={Component} />

  <Route path=':secondaryCategory'
    component={SecondaryCategory} />

  <Route path='/main/:secondaryCategory'>
    <Route path='buttons/:buttonId' component={Buttons} />
  </Route>
</Route>

即使页面内容被修改，这也会保持两个导航项都被选中。

【讨论】：