v6路由权限管理

React Router v6的权限管理机制相比v5有了重大变化。在v5中，我们可以通过Route组件的render属性来实现权限控制，但在v6中，这种做法已被废弃。

v6权限管理核心变化

v6引入了useRoutes和useNavigate等新API，路由权限控制需要通过useEffect配合navigate来实现。新的路由结构也更加扁平化，不再支持嵌套路由的Route组件直接传入component或render属性。

实践方案

1. 基础权限检查

const PrivateRoute = () => {
  const navigate = useNavigate();
  const { user } = useContext(AuthContext);
  
  useEffect(() => {
    if (!user) {
      navigate('/login');
    }
  }, [user, navigate]);
  
  return user ? <Outlet /> : null;
};

2. 路由配置

const routes = [
  {
    path: '/',
    element: <PrivateRoute />, // 权限检查层
    children: [
      { path: 'dashboard', element: <Dashboard /> },
      { path: 'profile', element: <Profile /> }
    ]
  }
];

3. 组合使用useRoutes

const AppRoutes = () => {
  const routes = useRoutes([
    {
      path: '/login',
      element: <Login />
    },
    {
      path: '/',
      element: <PrivateRoute />, // 权限控制
      children: [
        { path: 'dashboard', element: <Dashboard /> }
      ]
    }
  ]);
  
  return routes;
};