React路由管理与权限控制实战
📚 30章 · 体系化
v2.0
01
React路由入门
React Router概述
SPA与MPA
路由原理
安装配置
02
基础路由组件
BrowserRouter
HashRouter
Route组件
path/exact
03
导航与链接
Link / NavLink
activeClassName
activeStyle
useNavigate
04
嵌套路由
嵌套概念
Outlet组件
相对/绝对路径
布局路由
05
动态路由
URL参数(useParams)
查询参数
通配符/404
06
路由传参
state传参
search传参
params传参
对比选择
07
路由守卫基础
什么是路由守卫
为什么需要
前端权限思路
08
React Context入门
Context概念
createContext
useContext
Provider/Consumer
09
用户认证状态管理
AuthContext设计
登录状态存储
Token管理
用户信息
10
高阶组件(HOC)实现权限
HOC概念
withAuth
withPermission
优缺点
11
Render Props模式
Render Props概念
权限组件实现
与HOC对比
12
自定义Hook实现权限
自定义Hook概念
useAuth
usePermission
复用性
13
路由守卫组件实现
PrivateRoute
RoleRoute
权限不足重定向
14
角色权限模型
RBAC模型
角色与权限
权限矩阵
数据结构
15
动态路由生成
动态生成路由表
路由懒加载+权限
缓存问题
16
菜单权限控制
动态菜单生成
菜单与路由映射
显隐/排序/分组
17
按钮级权限控制
按钮权限组件
自定义指令式
权限点管理
细粒度控制
18
路由懒加载与权限
React.lazy+Suspense
权限+懒加载
加载状态
19
路由动画与权限
React Transition Group
路由切换动画
权限过渡效果
20
多级路由权限
多级嵌套权限
父级与子级关系
递归路由组件
21
路由权限与Redux
Redux Toolkit集成
权限状态管理
中间件处理
22
路由权限与Zustand
Zustand入门
轻量权限状态
集成React Router
23
路由权限与后端交互
获取权限API设计
权限缓存策略
过期处理
24
路由权限测试
Jest + RTL
路由守卫单元测试
权限组件测试
25
路由权限性能优化
避免重渲染
权限计算缓存
memo/useMemo
26
常见权限场景处理
多角色切换
临时权限提升
降级/冲突解决
27
路由权限与国际化
i18n集成
多语言路由
权限提示国际化
28
路由权限与错误处理
403页面
401页面
全局错误边界
29
企业级权限架构实战
大型项目架构
微前端权限共享
权限日志审计
30
项目实战：权限管理系统
需求分析
架构设计
编码实现
测试部署
总结展望