如何在 React Router v6 中动态高亮侧边栏当前路由项

本文详解如何利用 uselocation Hook 实时获取当前路径，并基于 location.pathname 自动判断并高亮侧边栏中匹配的导航项，无需手动维护状态，避免路径滞后问题。

本文详解如何利用 `uselocation` hook 实时获取当前路径，并基于 `location.pathname` 自动判断并高亮侧边栏中匹配的导航项，无需手动维护状态，避免路径滞后问题。

在使用 react-router-dom v6 构建单页应用时，侧边栏（Sidebar）的“当前激活项”高亮逻辑常因路径更新时机问题而失效——例如点击跳转后 useState 仍保留旧路径，导致 active 类未及时切换。根本原因在于：手动用 useState + onClick 模拟路由状态，违背了 react Router 的声明式设计原则。

正确的做法是：直接消费路由上下文提供的实时状态，而非自行同步。useLocation() 返回的 location 对象是响应式且自动更新的，其 pathname 属性精确反映浏览器地址栏中的路径（如 /, /employees, /dashboard）。我们只需在渲染时动态比对即可。

以下是优化后的侧边栏组件实现：

import { useLocation, Link } from 'react-router-dom';  export const SideBar = ({ isSidebarOpen }: { isSidebarOpen: boolean }) => {   const { pathname } = useLocation(); // ✅ 响应式获取当前路径    const anchors = [     {       id: "topics",       icon: <InfoCircleFill />,       text: "Topics",       link: "", // 等价于 "/"     },     {       id: "employees",       icon: <PersonLinesFill />,       text: "Employees",       link: "employees",     },     {       id: "dashboard",       icon: <BarChartFill />,       text: "Dashboard",       link: "dashboard",     },     {       id: "user-entry",       icon: <PersonPlusFill />,       text: "User",       link: "user",     },   ];    return (     <nav className={`sidebar ${isSidebarOpen ? 'open' : ''}`}>       {anchors.map((anchor) => {         // ✅ 关键逻辑：根据 pathname 动态计算 active 状态         const isActive =            anchor.link === ""              ? pathname === "/"              : pathname === `/${anchor.link}`;          return (           <Link             to={anchor.link}             key={anchor.id}             className={`list-group-item border-0 d-inline-block text-truncate mb-3 ${               isActive ? "active bg-primary text-white" : "text-dark"             }`}             data-bs-parent="#sidebar"           >             {anchor.icon}             <span className="ms-2">{anchor.text}</span>           </Link>         );       })}       <Outlet />     </nav>   ); };

⚠️ 注意事项与最佳实践

• 避免冗余状态：删除 useState(“topics”) 和 toggleActiveSideNavbarItem，它们不仅增加复杂度，还会因事件执行顺序（如 onClick 在导航前触发）导致竞态问题。
• 路径匹配需严谨：注意 “” 表示根路径 /，因此需显式判断 pathname === “/”；其他路径建议统一加前导 /（如 “/employees”），或使用 path-to-regexp 等库支持嵌套路由/参数匹配。
• useLocation 必须在 内使用：确保组件被 BrowserRouter 或其衍生路由器包裹，否则会抛出 useLocation may be used only in the context of a component 错误。
• 性能无忧：useLocation 是轻量级 Hook，其返回值在路径变更时自动更新，React 会智能重渲染依赖它的组件，无需 useEffect 或 useMemo 优化。

通过该方案，侧边栏激活态完全由路由驱动，天然支持浏览器前进/后退、URL 直接访问、服务端跳转等所有导航场景，真正实现「所见即所得」的路由感知体验。