React-Router v6中根NavLink始终带有active类的原因是什么？

问题原因 #

React-Router v6 里的NavLink默认采用部分匹配规则，根路径/会匹配所有以/开头的路由（比如/about、/contact等），所以对应的Home导航项始终会被加上active类。

解决方法 #

给根路径的NavLink添加end属性，开启完全匹配模式——只有当当前路径严格等于/时，才会激活active类。

修改后的导航代码 #

<nav>
  <ul>
    <li>
      <NavLink to='/' end>Home</NavLink> 
    </li>
    <li>
      <NavLink to="/about" >About</NavLink>
    </li>
    <li>
      <NavLink to="/contact" >Contact</NavLink>
    </li>
    <li>
      {!user ? <NavLink to="/login" className="user"> 
        <i className="fa-regular fa-user"></i>
      </NavLink>: ""}
    </li>
  </ul> 
</nav>

补充说明 #

如果需要更灵活的匹配逻辑，也可以通过isActive属性手动判断：

<NavLink 
  to='/' 
  isActive={(match, location) => location.pathname === '/'}
>
  Home
</NavLink>

不过end属性是官方推荐的、实现完全匹配更简洁的方式。

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