reactjs navlink activeClassName 不适用于 root

Question

我使用 react <Navlink> 作为活动路线 class 像这样与 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页面根目录时/也显示活动class

我想要什么时候去其他页面，如果 /sale 那么只有这个链接显示活动class而不是其他。

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>

reactjs navlink activeClassName 不适用于 root

reactjs navlink activeClassName not working on root

nav

reactjs

react-navigation

tailwind-css