React Router 路由守卫与权限控制
React Router v6 中如何实现路由守卫(如登录验证、权限检查)？useNavigate、Navigate 组件、loader 函数各自的角色是什么？如何实现嵌套路由的权限继承？
回答
Yahuda
方式1: 封装 RequireAuth 组件: function RequireAuth({children}){const user=useAuth(); if(!user) return ; return children}，包裹 Route element。方式2: loader: {path:'/dashboard', loader:()=>{if(!checkAuth()) throw redirect('/login'); return null}}。方式3: Hook+Outlet。嵌套: 父路由检查登录，子 loader 检查角色。useNavigate 函数中跳转。懒加载: React.lazy(()=>import('./Dashboard'))+Suspense。错误: errorElement 捕获路由级别错误。