构建一个健壮的前端路由系统，不仅仅是把页面配置进去，更要考虑层级结构、权限控制、用户体验（重定向）以及异常兜底（404）。
一、路由分类（层级结构）
1. 第一层（顶层）
- 区分“无需登录页面”（如登录页）和“需登录业务页”（如后台主界面）
- 示例配置：
{path:"/login",component:"LoginPage"},
2. 第二层（业务层）
- 加载全局 Layout（侧边栏、Header），并进行权限校验
- 示例配置：
{path:"/",component:"@/widgets/MainLayout",routes:[{path:"/",redirect:"/dashboard"},{path:"/dashboard",component:"DashboardPage",wrappers:["@/wrappers/auth"],},// 其他业务页面...]} - 路由守卫（auth Wrapper）实现：
import{Navigate,Outlet,useLocation}from"umi";import{isUserLoggedIn}from"@/shared/utils/auth";/** * 路由守卫（第一道防线） * 拦截没有 Token 的用户，并重定向到登录页，传递 reason=no_auth */exportdefault()=>{constlocation=useLocation();constisLogin=isUserLoggedIn();if(isLogin){return<Outlet/>;}else{// 构造目标 URL// 1. redirect: 登录成功后要跳回的地方// 2. reason=no_auth: 告诉登录页，这是因为没登录被拦截过来的constcurrentPath=encodeURIComponent(location.pathname+location.search);consttargetUrl=`/login?redirect=${currentPath}&reason=no_auth`;return<Navigate to={targetUrl}replace/>;}};
3. 第三层（功能层）
- 具体的业务页面、重定向规则、内部 404
- 示例配置：
{path:"*",component:"404"},
二、路由书写顺序
- 路由匹配是“从上到下”的 (Order Matters)，路由器会像 switch 语句一样，从第一行开始找
- 错误做法：把 path: ‘/’ 放在 path: ‘/login’ 前面，且没有加 exact
- 后果：所有页面都会匹配到 /，导致登录页可能渲染不出来或者被 Layout 包裹
三、权限校验
- 使用 Umi Wrappers (高阶组件)
- 配置方式：在路由配置中添加
wrappers: ['@/wrappers/auth'] - 执行逻辑：路由匹配到该层级时，先执行 Wrapper。如果 Wrapper 判断未登录，直接跳转，主 Layout 连加载的机会都没有，彻底杜绝空白或闪屏。
