如何解决reactjs navlink activeClassName不适用于root
我已经使用了响应<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
,则仅此链接显示活动类,而其他页面不显示。
解决方法
您必须添加“精确”关键字才能使其仅在“ /”时起作用
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。