React Router实现当前路由Tab高亮问题咨询

嘿，我懂你这种试了各种方法还是搞不定路由高亮的挫败感——我之前做项目也卡过这个点！咱们直接上最实用的解决方案，都是React Router生态里经过验证的办法：

这是官方专门为导航高亮设计的组件，自带激活状态判断逻辑，不用自己瞎折腾：

import { NavLink } from 'react-router-dom';

function NavigationBar() {
  return (
    <nav className="nav-container">
      {/* 根路由记得加end属性，避免子路由激活时根导航也高亮 */}
      <NavLink 
        to="/" 
        className={({ isActive }) => isActive ? 'active-nav' : 'normal-nav'}
        end
      >
        首页
      </NavLink>
      <NavLink 
        to="/about" 
        className={({ isActive }) => isActive ? 'active-nav' : 'normal-nav'}
      >
        关于我们
      </NavLink>
    </nav>
  );
}

再配上对应的CSS样式：

.normal-nav {
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
}

.active-nav {
  padding: 8px 16px;
  color: #2563eb;
  font-weight: bold;
  border-bottom: 2px solid #2563eb;
  text-decoration: none;
}

核心逻辑就是NavLink会自动给当前匹配的路由返回isActive状态，我们用这个状态动态切换类名就行，end属性是根路由的关键，不然你在/about页面时，/也会被判定为匹配（因为是父路由）。

如果因为项目特殊需求不想用NavLink，可以自己用useLocation拿当前路径做匹配：

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

function NavigationBar() {
  const { pathname } = useLocation();

  // 自定义匹配逻辑，这里是精确匹配，需要模糊匹配的话可以改成startsWith
  const checkActive = (targetPath) => pathname === targetPath;

  return (
    <nav className="nav-container">
      <Link 
        to="/" 
        className={checkActive('/') ? 'active-nav' : 'normal-nav'}
      >
        首页
      </Link>
      <Link 
        to="/about" 
        className={checkActive('/about') ? 'active-nav' : 'normal-nav'}
      >
        关于我们
      </Link>
    </nav>
  );
}

同样用上面的CSS样式就可以，这种方式更灵活，适合需要复杂匹配规则的场景。

• 别搞混组件：Link没有激活状态功能，一定要用NavLink
• 路由嵌套问题：如果是嵌套路由，要调整NavLink的end属性或者自定义匹配逻辑
• CSS优先级：可能你的高亮样式被全局样式覆盖了，可以给active-nav加更高优先级，比如写成.nav-container .active-nav
• 版本兼容：React Router v6和v5的API有差异，确保你看的文档和当前项目版本对应

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