为什么发这篇文章

因为我发现这个问题在国内开发者社区没有人提出，而且 React 的文档相当难看，极不符合中国人的阅读习惯

这是在我项目中使用最新版本 react-router-dom 出现的问题：

在使用 <NavLink /> 时，我们可以知道某路由是否为 active 状态

如果是，那么就会展示 active 样式，我们可以使用 exact，但是在 v6 版本中
请不要使用 exact！！！

因为你会发现：你与另外一个子路由连接时，你会发现，你的 index 路由，也会处于 active，所以 index 路由如果有 active 样式的话，将会使你非常尴尬

解决方法

请在 <NavLink /> 里加上 end

// App.jsx

<nav>
  <NavLink to='/account' end> 账户的 a 页面 </NavLink>
  <NavLink to='/account/b'> 账户的 b 页面 </NavLink>
  <NavLink to='/account/c'> 账户的 c 页面 </NavLink>
</nav>
<Outlet />

// Router.jsx

<Router>
  <Routes>
    <Route path='/account' element={<Account />}>
      <Route index element={<A />} />
      <Route path='b' element={<B />} />
      <Route path='c' element={<C />} />
    </Route>
  </Routes>
</Router>

如果没有 end，账户的 a 页面 将始终处于 active 状态。 这样就可以实现 NavLink 当前路径完全匹配时才会激活，而不是你选了 B，结果 A 还亮着。

完。

相关链接：
stackoverflow 的提问
Github 的 Issues