reactjs navlink activeClassName 不适用于 root

Question

我已经使用 react <Navlink>对于像这样的带有 tailwind-css 的事件路由类:

import { NavLink } from 'react-router-dom';

<NavLink to={'/'} activeClassName="text-orange-600 border-orange-600" className="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-purple-500">
          Home
</NavLink>

但是当我单击其他链接时，root ( / ) 始终显示为事件状态。
什么时候去 /sale页面根 /还显示 activeclass
我想什么时候去其他页面，如果 /sale那么只有这个链接显示事件类而不是其他链接。

Answer 1

您必须添加“exact”关键字才能使其仅在“/”时起作用
https://reactrouter.com/web/api/NavLink

<NavLink exact to={'/'} activeClassName="text-orange-600 border-orange-600" className="block py-1 md:py-3 pl-1 align-middle text-gray-500 no-underline hover:text-gray-900 border-b-2 border-white hover:border-purple-500">
          Home
</NavLink>