Question

我已经使用了响应<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>

但是，当我单击其他链接时，根（/）始终处于活动状态。

转到/sale页的根/时，还会显示activeclass

我想要在转到其他页面时，如果/sale，则仅此链接显示活动类，而其他页面不显示。

Answer 1

您必须添加“精确”关键字才能使其仅在“ /”时起作用

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

1 个答案: