React Router v6 路由权限验证机制

前言

React Router v6 相比 v5 在路由权限验证方面有了重大变化，不再支持直接在 Route 组件上使用 component 属性，而是需要通过自定义 Hook 和路由守卫来实现权限控制。

核心实现方案

1. 创建权限验证 Hook

import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

const useAuth = () => {
  const navigate = useNavigate();
  
  useEffect(() => {
    // 检查用户权限
    const token = localStorage.getItem('token');
    if (!token) {
      navigate('/login', { replace: true });
    }
  }, [navigate]);
};

2. 实现受保护路由组件

import { Outlet } from 'react-router-dom';
import { useAuth } from './hooks/useAuth';

const ProtectedRoute = () => {
  useAuth();
  return <Outlet />;
};

3. 配置路由规则

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />, // 根组件
    children: [
      {
        index: true,
        element: <Home />
      },
      {
        path: 'dashboard',
        element: <ProtectedRoute />, // 受保护的路由
        children: [
          { index: true, element: <Dashboard /> }
        ]
      }
    ]
  }
]);

复现步骤

1. 在项目中安装 React Router v6：npm install react-router-dom@latest
2. 创建 useAuth Hook 并实现权限检查逻辑
3. 构建 ProtectedRoute 组件包装受保护的路由
4. 在路由配置中使用 ProtectedRoute 包裹需要验证的路由
5. 测试未登录用户访问受保护路由时是否正确跳转到登录页

注意事项

• v6 中 useLocation 和 useNavigate 的使用方式与 v5 有差异
• 权限验证逻辑应放在组件挂载时执行
• 建议将权限检查逻辑抽象为独立的 Hook 便于复用