导航链接在更改 react-router-dom 时仍然保持活动状态答案

【问题标题】：navigation Link still remains active on change react-router-dom导航链接在更改 react-router-dom 时仍然保持活动状态
【发布时间】：2020-11-30 01:38:25
【问题描述】：

我有两个使用 react-router-dom 标签的导航按钮。我面临的问题是当我从第一个按钮切换到第二个按钮时，第一个按钮仍然处于活动状态。

在我的情况下，我有一个 runs 按钮和 input 按钮 runs按钮处于活动状态，但是当input按钮被点击时，运行按钮仍然处于活动状态

这是我的 sn-p 显示导航选项卡：从“react-router-dom”导入 { NavLink }；

<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>

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

也许exact 属性可以解决这个问题。因为您的 URL 像“/task/5”和“/task/5/input”，在这种情况下，路由器会检查 URL 的第一部分，所以这两个 URL 以“/tasks/5”开头，这就是为什么您的链接始终处于活动状态

<NavLink to={`/tasks/${task}`} exact activeStyle={{ backgroundColor: '#0022ff', color: '#FFF' }}>
    Runs
  </NavLink>

【讨论】：

【解决方案2】：

React 路由器 dom 会将 /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>

【讨论】：