v6路由导航栏组件实现踩坑：导航高亮显示异常原因

在React Router v6升级过程中，我们遇到了一个典型的导航高亮问题。在v5中，使用NavLink的activeClassName或activeStyle属性即可轻松实现高亮效果，但v6版本完全重构了API设计。

问题复现步骤

使用v6的useNavigate和useLocation钩子
在导航组件中使用NavLink但发现高亮失效
尝试通过isActive函数判断当前路由状态

核心代码问题

// 错误示例
const Navigation = () => {
  const location = useLocation();
  
  return (
    <nav>
      <Link to="/home" className={location.pathname === '/home' ? 'active' : ''}>
        首页
      </Link>
      <Link to="/about" className={location.pathname === '/about' ? 'active' : ''}>
        关于
      </Link>
    </nav>
  );
};

正确解决方案

v6中推荐使用NavLink的end属性和isActive函数：

// 正确示例
const Navigation = () => {
  return (
    <nav>
      <NavLink to="/home" end className={({ isActive }) => isActive ? 'active' : ''}>
        首页
      </NavLink>
      <NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
        关于
      </NavLink>
    </nav>
  );
};