---
name: react-routing
when: '路由, 页面跳转, 菜单, 权限路由, 导航, 路由配置, react-router, 页面路由, 嵌套路由, 路由守卫'
scope:
  - frontend
products:
  - '*'
id: ka-pattern-react-routing
asset_kind: pattern
lifecycle_status: active
owner_mechanism_id: mc-frontend-pattern
authority: supporting
routes:
  - '*'
primary_triggers:
  - 路由
  - 页面跳转
  - 菜单
  - 权限路由
  - 导航
  - 路由配置
  - react-router
  - 页面路由
  - 嵌套路由
  - 路由守卫
priority: P2
specificity: 3
version: 1.1.0
last_reviewed: '2026-06-01'
consumes: []
emits: []
secondary_triggers: []
negative_triggers: []
type: pattern
stages: ["联调验证"]
---

## 决策规则
- 路由配置必须集中在 routes.ts，禁止散落在各组件中
- 页面组件必须使用 React.lazy + Suspense 懒加载
- 需要登录的页面必须被 AuthGuard 包裹
- 权限路由必须在路由级别拦截，禁止仅靠隐藏菜单项
- 必须配置 404 兜底路由
- 路由定义必须集中管理（路由表配置），禁止散落在各组件中
- 路由路径必须使用 kebab-case，禁止使用 camelCase 或中文
- 页面组件必须使用 React.lazy + Suspense 实现路由级代码分割
- 需要权限的路由必须配置路由守卫（auth guard），未登录重定向到登录页
- 404 页面必须配置兜底路由（* 路径），禁止空白页

## 验收项
- [AC-01] 路由配置集中在 routes.ts
- [AC-02] 页面组件使用懒加载
- [AC-03] 需要登录的页面被 AuthGuard 包裹
- [AC-04] 有 404 兜底路由
- [AC-05] 路由集中管理
- [AC-06] 路由级代码分割
- [AC-07] 权限路由有守卫
- [AC-08] 404 兜底页面
