React Router V6中根路径<NavLink>始终激活的问题咨询

问题出在React Router v6已移除exact属性，你用的exact在v6版本里完全不生效，而NavLink默认采用「部分匹配」规则——只要当前路径以NavLink的to值开头，就会判定为激活状态。所以访问/werknemers时，to="/"的NavLink会因为路径以/开头而持续处于激活状态。

解决方案 #

把根路径NavLink上的exact替换成end属性即可。end属性的作用是让NavLink仅在完全匹配路径时才触发激活状态。

修改后的根路径NavLink代码：

<NavLink end to="/" className={({ isActive })=> (isActive ? `active ${LINK_CLASSES}` : `inactive ${LINK_CLASSES}`)}>
  <span>Dashboard</span>
</NavLink>

补充说明 #

其他子路由的NavLink不需要额外调整，因为它们的路径是werknemers和verzuimdossiers，访问对应页面时只会匹配自身的NavLink；而加了end的根路径NavLink，只会在访问/（即Dashboard页面）时才显示激活状态。

内容的提问来源于stack exchange，提问作者Reinier68