reactjs navlink activeClassName在根目录上不工作

我已经将react

用于活动路线类，如带有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>

从'react router dom'导入{NavLink}；
家

但当我单击其他链接时，root（

/

）显示始终处于活动状态

当转到

/sale

页面根

/

时，也会显示activeclass

我想在转到其他页面时，如果

/sale

，则仅此链接显示ActiveClass，而不是其他链接。

您必须添加“精确”关键字，以便仅当“/”时它才能工作

家

它工作正常，因此这很简单，只需添加此关键字即可

<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>