React Router：点击子路由/about时取消父路由/的active类

问题核心：React Router v6中NavLink默认采用前缀匹配规则，即只要当前路径以目标路径开头（比如/about以/开头），就会为/的链接添加active类，导致父路由和子路由链接同时高亮。

解决方案1：使用NavLink的end属性（推荐） #

在指向根路径/的NavLink上添加end属性，强制完全匹配路径：

// Layout组件中的Navbar部分
import { NavLink, Outlet } from 'react-router-dom';

function Layout() {
  return (
    <div>
      <nav>
        {/* 添加end属性，仅当路径完全为/时激活 */}
        <NavLink to="/" end>首页</NavLink>
        <NavLink to="/about">关于</NavLink>
      </nav>
      <Outlet />
    </div>
  );
}

end属性的作用：当设置该属性后，NavLink只会在当前路径与to的路径完全一致时，才会添加active类，避免前缀匹配导致的父路由误激活。

解决方案2：自定义匹配逻辑（非NavLink场景） #

如果使用自定义导航组件而非NavLink，可以通过useLocation钩子手动判断路径是否完全匹配：

import { useLocation, useNavigate } from 'react-router-dom';

function CustomNavLink({ to, children }) {
  const location = useLocation();
  const navigate = useNavigate();
  // 严格判断路径是否完全一致
  const isActive = location.pathname === to;

  return (
    <a
      href="#"
      className={isActive ? 'active' : ''}
      onClick={(e) => {
        e.preventDefault();
        navigate(to);
      }}
    >
      {children}
    </a>
  );
}

// 使用方式
<CustomNavLink to="/">首页</CustomNavLink>
<CustomNavLink to="/about">关于</CustomNavLink>

验证效果 #

• 访问/时，仅首页链接显示黄色（active类生效）
• 访问/about时，仅关于页面链接显示黄色，首页链接恢复默认样式

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