React Router Dom isActive属性异常：迁移Vite后根路径始终激活

迁移到Vite后，切换到/projects路由时，根路径/的NavLink的isActive始终为true，导致两个导航同时高亮，且未修改路由相关代码、此前在CRA环境下正常。

问题原因 #

这个问题和Vite无关，本质是react-router-dom的NavLink默认匹配规则导致的：NavLink默认采用部分匹配，/会匹配所有以/开头的路径（比如/projects、/contact），所以只要不在404页面，根路径的NavLink都会被判定为激活状态。

解决方案 #

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

修改NavLinks.jsx代码如下：

import { nanoid } from "nanoid";
import { NavLink } from "react-router-dom";
import { navLinks } from "../../data/links";

const NavLinks = ({ closeSidebar }) => {
  return (
    <ul className="nav-links">
      {navLinks.map((link) => {
        const { text, url } = link;
        return (
          <li key={nanoid()}>
            <NavLink
              to={url}
              onClick={closeSidebar}
              // 仅根路径添加end属性，强制完全匹配
              end={url === '/'}
              className={({ isActive }) => {
                return isActive ? "nav-link active" : "nav-link";
              }}>
              {text}
            </NavLink>
          </li>
        );
      })}
    </ul>
  );
};

export default NavLinks;

补充说明 #

• end属性是react-router-dom v6版本的特性，对应v5及以前版本的exact属性。从你的代码使用Routes组件来看，应该是v6版本，直接用end即可。
• 添加该属性后，切换到/projects或/contact时，根路径的NavLink会自动取消激活状态，符合预期。

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