reactjs navlink activeClassName在根目录上不工作
reactjs navlink activeClassName在根目录上不工作
提问于 2020-08-16 05:23:52
我已经对活动路由类使用了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>但当我单击其他链接时，根目录(/)显示始终处于活动状态。
当转到/sale页面时，根目录/也会显示激活类
我想当转到其他页面，如果/sale，那么只有这个链接显示活动类，而不是其他。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-16 05:27:55
您必须添加"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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63430935
复制相关文章
相似问题
腾讯云开发者
