如何在浏览器上为NavItem提供活动类

Question

在我的应用程序中，我正在使用反应路由器3 对于我使用的导航菜单

<nav>
    <NavItem> </NavItem>
</nav>

单击导航菜单工作正常，但在使用浏览器返回时，网址已更改但活动类未应用。

Answer 1

我将尝试解释一般应该如何完成，而不是特定于框架。你可以在之后的任何框架中实现相同的

为了进行有状态导航，您可以利用查询参数。 所有你需要做的就是点击导航，你必须在查询参数上附加一些值来识别它的唯一性。

并且在组件初始化时你必须阅读查询参数并以编程方式选择该选项卡。（将css类应用于它）

例如，您有：

url:somedomain.com/home -- this is where you have navigation
NavItem1 href="somedomain.com/home?nav=tab1"
NavItem2 href="somedomain.com/home?nav=tab2"
NavItem3 href="somedomain.com/home?nav=tab3"

当组件初始化时，如果存在则必须读取查询参数并将相应的类提供给特定的NavItem