React路由中点击菜单项添加激活类及useNavigate使用问题

问题分析 #

你之前用useHistory失效是因为React Router v6移除了该钩子，改用useNavigate负责路由跳转，但**useNavigate是跳转函数，不能用来获取当前路由路径**。判断当前激活路由应该用useLocation钩子获取当前路径。另外你的代码里Link组件嵌套了原生<a>标签，这是错误的——Link本身会渲染成<a>，嵌套会导致无效的HTML结构。

解决方案步骤 #

1. 导入useLocation钩子获取当前路由信息
2. 拼接导航项的完整路径，与当前路由的pathname对比
3. 根据对比结果动态添加激活类
4. 移除Link内部的嵌套<a>标签

修改后的完整代码 #

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

// 示例路由配置（根据你的实际配置调整）
// const routes = [
//   { icon: <HomeIcon />, name: "首页", path: "/" },
//   { icon: <ChartIcon />, name: "数据统计", path: "/stats" },
//   { icon: <SettingIcon />, name: "系统设置", path: "/settings" },
// ];

const SidebarNav = () => {
  const location = useLocation();

  return (
    <nav className="pt-4">
      {routes.map(({ icon, name, path }) => {
        const fullNavPath = `/dashboard${path}`;
        // 判断当前路由是否匹配导航项的完整路径
        const isActive = location.pathname === fullNavPath;

        return (
          <ul key={name}>
            <li className="mb-1">
              <Link
                to={fullNavPath}
                shallow
                scroll
                className={`block flex gap-4 items-center px-4 py-2 text-xs hover:pl-6 transition-all duration-300
                  ${isActive ? 'bg-gradient-to-r from-white/10 text-primary' : 'text-white hover:text-primary'}
                `}
              >
                {icon}
                <span>{name}</span>
              </Link>
            </li>
          </ul>
        );
      })}
    </nav>
  );
};

export default SidebarNav;

补充说明 #

如果你的路由包含嵌套子路由（比如/dashboard/stats/detail），想要父导航项保持激活状态，可以用startsWith做模糊匹配：

const isActive = location.pathname.startsWith(fullNavPath);

useLocation会在路由变化时自动更新，激活状态会实时同步。

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