在React路由器中为两个不同的路由应用NavItem活动类。

Question

我在reactJs/路由器应用程序中有一个导航栏，如下所示，

<Nav>
    <LinkContainer exact to="/dashboard">
        <NavItem>Dashboard</NavItem>
    </LinkContainer>
    <LinkContainer to="/contract">
        <NavItem>Contract</NavItem>
    </LinkContainer>
</Nav>

在某些情况下，当用户访问

/contract

并且该用户只有一份合约时，链接将被重定向到

/contractDetail

页面。当这种情况发生时，我仍然希望我的

<NavItem>Contract</NavItem>

突出显示/有活跃的班级。但是，这现在不起作用，因为

<NavItem>

没有

contractDetail

。

我不确定如何实施，任何帮助将不胜感激。注意：这在链接上时有效

/dashboard

Answer 1

使用 React-Router-Dom，您可以定义自定义逻辑以将 NavLink 显示为活动状态。这是 文档中条目的链接