为什么React路由器NavLink支柱精确(v5)与末端(v6)在url中拖尾斜线导致不同的结果

Question

在React路由器版本5中，我有一个NavLink，它看上去如下所示：

<NavLink
  to="/notes"
  exact={true}
  className="border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
  activeClassName="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
>
  Home
</NavLink>

它将带有尾随斜杠的localhost:3000/notes和localhost:3000/notes/识别为活动urls。

在React路由器版本6中，我将其重构为以下内容：

<NavLink
  to="/notes" end
  className={(navData) =>
  navData.isActive
    ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
    : "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
  }
>
  Home
</NavLink>

这只会识别localhost:3000/notes为活动url。

在v6中是否有一种方法可以将尾随斜杠识别为活动url的版本？

Answer 1

我认为您混淆了react-router-dom v5 exact道具所代表的东西，或者更确切地说，混淆了exact和strict道具之间的行为。

v5

• exact：时，只有当位置与exactly.
• strict：匹配时，才会应用活动类/样式。在确定位置是否与当前的URL匹配时，将考虑到位置路径名上的尾随斜杠。有关更多information.

，请参见文档

注意，关于精确匹配的重点是我的。

v6

在react-router-dom版本6中，所有的路由/链接总是完全匹配的。与路由匹配相比，end NavLink的支柱更多地与尾随斜杠"/"有关。

如果使用end支柱，它将确保该组件在其后代路径匹配时不匹配为"active“。例如，若要呈现仅在网站根目录下活动的链接，而不呈现任何其他URL，您可以使用：

首页

来回答你的问题

为什么反应路由器NavLink支柱精确(v5)和末端(v6)导致不同的结果在url中尾随斜线。

这是因为你把苹果比作橘子。如果您想实现从v5到v6与尾随斜杠"/"的相同链接行为，那么忽略end支柱。

<NavLink
  to="/notes"
  className={(navData) =>
    navData.isActive
      ? "bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
      : "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-800 block pl-3 pr-4 py-2 border-l-4 text-base font-medium"
  }
>
  Home
</NavLink>

​

​