React Router v4 和嵌套路由:索引导航链接始终保持活动状态

Question

目前我有这个路由结构：

主.js：

<Router>
<Switch>
<Route exact path='/' component={AuthApp}/>
<Route path='/app' component={ContentApp}/>
</Switch>
</Router>

我需要在我的ContentApp内部进行一些内部导航：

//ContentApp:
<Route exact path={`${match.url}/`} component={Content}/>
<Route exact path={`${match.url}/something`} component={Something}/>
<Route exact path={`${match.url}/else`} component={Else}/>
<Route exact path={`${match.url}/blahblah`} component={BlahBlah}/>

和一些导航 ofc：

//Header.js
<NavLink exact to='/app' >Dashboard</NavLink>
<NavLink to='/app/something' >Something</NavLink>
<NavLink to='/app/else' >Else</NavLink>
<NavLink to='/app/blahblah' >BlahBlah</NavLink>

所以问题是：它工作得很好，但是第一个链接始终保持活动状态。谁能建议我如何解决这个问题？谢谢

Answer 1

在 React Router V6 中使用end= {true}，就像下面的例子一样，

<NavLink
className={({ isActive }) =>
isActive ? "active nav-link" : "nav-link"
}
to="/admin/new"
>
Add New
</NavLink>
</li>
<li class="nav-item">
<NavLink
className={({ isActive }) =>
isActive ? "active nav-link" : "nav-link"
}
to="/admin"
end={true}
>
Manage
</NavLink>

在此示例中，我使用两个路由/admin和/admin/new来检测我end= {true}添加/admin/new路径。

Answer 2

只需将您的NavLink修改为：

//Header.js
<NavLink exact to='/app' >Dashboard</NavLink>
<NavLink exact to='/app/something' >Something</NavLink>
<NavLink exact to='/app/else' >Else</NavLink>
<NavLink exact to='/app/blahblah' >BlahBlah</NavLink>