但Ru果你在Zuo导航栏，你可Neng会遇到一个痛点：如何高亮当前选中的菜单？这时候，就派上用场了。它是Link的增强版，自带激活状态检测。你Ke以利用end属性来控制匹配模式，防止/这种根路径错误地匹配到所有子路由。此外通过isActive状态，你Ke以动态地绑定样式类名，轻松实现“当前菜单高亮”的效果。

现实开发往往比点击链接复杂得多。比如用户提交表单成功后需要跳转，或者接口返回401时需要强制登出。这些dou不是简单的点击事件Neng解决的，我们需要在代码逻辑中“命令”路由进行跳转。这就是useNavigate Hook的用武之地。

import { useNavigate } from 'react-router-dom';
function Home {
  const navigate = useNavigate;
  const handleLogin =  => {
    // 模拟登录逻辑...
    // 登录成功后跳转到个人中心，并携带状态
    navigate('/profile', { 
      replace: true, // 替换当前历史记录，用户无法回退到登录页
      state: { from: 'home' } // 隐式传递数据，不显示在URL上
    });
  };
  const goBack =  => {
    navigate; // 后退一步，就像浏览器的后退按钮
  };
  return (
    

      登录并跳转
      返回上一页
    
  );
}

这里要特别提一下replace属性。默认情况下它是false，意味着跳转会新增一条历史记录；但Ru果设置为true，它就会替换当前记录。这在“登录成功后不允许用户退回到登录页”这种场景下简直是救命稻草。

聊完了监听和跳转，我们终于来到了Zui硬核的部分——路由守卫。hen多从Vue转过来的开发者一开始会hen不习惯：Vue Router有现成的beforeEach和afterEach，多方便啊！但React Router的设计哲学不同，它没有提供专属的守卫API，而是将自由权交还给了开发者。核心思路hen简单：监听路由变化 + 条件判断 + 阻断渲染或重定向。

虽然听起来有点“原始”，但这反而给了我们无限的定制空间。我们Ke以把守卫分为三大类：全局守卫、组件内守卫和独享守卫。

这是Zui常见的需求：未登录用户不Neng访问除了登录页以外的任何页面。实现方式通常是在路由的根组件中，利用useLocation和useEffect进行拦截。

我们Ke以创建一个GlobalRouterGuard组件，把它放在的外层。这样，任何路由的切换dou会先经过它的“安检”。

import { useLocation, useNavigate, useEffect } from 'react-router-dom';
import { isLogin } from '@/utils/auth'; // 假设这是你的登录校验工具
const GlobalRouterGuard =  => {
  const location = useLocation;
  const navigate = useNavigate;
  // 定义白名单：这些页面不需要登录也Neng访问
  const whiteList = ;
  useEffect => {
    // 核心逻辑：Ru果没登录，且当前路径不在白名单内 -> 滚去登录页
    if  && !whiteList.includes) {
      navigate('/login', { 
        replace: true,
        state: { from: location.pathname } // 记录一下他想去哪，登录后好直接送过去
      });
    }
  }, );
  // 这个组件不负责渲染UI，只负责逻辑拦截
  return null; 
};
// 在入口文件中使用
// 
//    {/* 放在这里全站生效 */}
//   ...
// 

有些时候，我们不需要全局拦截，只想针对某一个特定的页面或模块进行限制。比如“设置页”只有管理员Neng进，其他页面普通用户也Nengkan。这时候，用全局守卫就显得太笨重了。

Zui佳实践是创建一个高阶组件或包装组件。比如我们创建一个AdminGuard，专门负责检查管理员权限。在路由配置时直接把需要保护的Route包裹在这个守卫组件里。

// 守卫组件：AdminGuard.jsx
import { useNavigate } from 'react-router-dom';
import { isAdmin } from '@/utils/auth';
const AdminGuard =  => {
  const navigate = useNavigate;
  // 管理员权限校验
  if ) {
    // 不是管理员？送回首页
    navigate;
    return null;
  }
  // 权限通过正常渲染子组件
  return children;
};
// 路由配置中使用
import { Routes, Route } from 'react-router-dom';
import SettingsPage from '@/pages/Settings';
const RouterConfig =  => {
  return (
    
      {/* 独享守卫：只有访问 /settings 时才会触发管理员校验 */}
      
            
          
        } 
      />
    
  );
};

除了“Neng不Neng进”，有时候我们还需要处理“离开时”的逻辑。比如用户正在填写一个复杂的表单，手一抖点到了别的链接，这时候Ru果不拦截，刚才填的数据就全丢了。

在组件内部，我们Ke以利用useEffect来实现“进入守卫”和“离开守卫”。

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { hasPermission } from '@/utils/permission';
const UserDetail =  => {
  const navigate = useNavigate;
  // 进入守卫：组件挂载时校验权限
  useEffect => {
    if ) {
      navigate;
    }
  }, );
  // 离开守卫：组件卸载时执行
  useEffect => {
    return  => {
      console.log;
      // 业务逻辑：保存草稿、关闭WebSocket连接等
    };
  }, );
  return 
用户详情页内容...
};

React Router v6 还新增了一个非常强大的 Hook —— useBlocker。正如其名，它Ke以像路障一样拦截所有的路由跳转行为，无论是点击调用navigate，还是用户点击浏览器的前进/后退按钮。

这在“表单未保存拦截”场景下简直是神器。当用户试图离开时我们Ke以弹出一个确认框，问用户真的要走吗。

import { useBlocker } from 'react-router-dom';
const MyForm =  => {
  const  = useState; // 假设表单被修改过就是dirty状态
  // blockerFn: 返回 true 表示拦截，false 表示放行
  // when: 控制是否启用拦截器
  const blocker = useBlocker(
     => 
      isDirty && currentLocation.pathname !== nextLocation.pathname
  );
  return (
    

      {blocker.state === "blocked" ? (
        

          
表单未保存，确定要离开吗？
           blocker.reset}>取消
           blocker.proceed}>确定离开
        
      ) : (
        
 setIsDirty}>
          {/* 表单内容 */}
        
      )}
    
  );
};

React Router 虽然没有像 Vue 那样开箱即用的守卫 API，但这种“极简主义”的设计反而赋予了开发者极大的灵活性。通过组合useLocationuseNavigateuseEffect以及高阶组件模式，我们完全Ke以构建出一套既严密又符合业务逻辑的路由管理体系。无论是全局的权限把控，还是细粒度的表单拦截，只要理解了其“监听-判断-响应”的核心逻辑，一切难题dou将迎刃而解。希望这篇文章Neng让你在下次处理路由问题时geng加游刃有余！