Javascript 嵌套导航上的反应路由器活动状态

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

我使用react router来处理路由，我希望在单击按钮和内容更改时，主导航项目和辅助导航项目都保持选中状态。我正在使用

组件处理活动链接，它用于主导航（单击的项目保持选中）和辅助导航（当我单击辅助导航项目时，它保持选中，页面上的按钮也会更改）

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

我的路线是这样的：

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

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

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

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

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

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

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

---

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

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

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

---

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

您没有包括它，但您正在使用

activeClassName

或

activeStyle

将您的

标记为活动，对吗？@PaulS是的，对