Question

我有一个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}`} />

如何在页面内容发生变化时选择辅助导航项？

Answer 1

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

RelativeLayout

即使页面内容被修改，也会保留两个导航项目。

在嵌套导航上响应路由器活动状态

1 个答案: