React路由器dom将把
我有两个导航按钮，它们使用react router dom的标签。我面临的问题是，当我从第一个按钮切换到第二个按钮时，第一个按钮仍然处于活动状态。
在我的情况下，我有一个runs按钮和input按钮runs按钮处于活动状态，但单击input按钮时，运行按钮仍处于活动
以下是我显示导航选项卡的片段：从"；反应路由器dom"；；
<div className = "navigation-tabs">
<NavLink to={`/tasks/${task}`} activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
Runs
</NavLink>
<NavLink to={`/tasks/${task}/input`} activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
Input
</NavLink>
</div>
/tasks/${task}和/tasks/${task}/input视为同一路径。要改变这一点，请将exact添加为导航链接标签的属性，如下所示：
<div className = "navigation-tabs">
<NavLink exact to={`/tasks/${task}`} activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
Runs
</NavLink>
<NavLink to={`/tasks/${task}/input`} activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
Input
</NavLink>
</div>
也许exact属性可以解决这个问题。因为你的URL喜欢"/任务/5"；以及"/任务/5/输入"；，在这种情况下，路由器检查URL的第一部分，因此这两个URL以"开头/任务/5"；这就是为什么你的链接总是激活
<NavLink to={`/tasks/${task}`} exact activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
Runs
</NavLink>