v6路由权限控制踩坑：自定义Hook实现路由守卫经验

React Router v6相比v5在路由权限控制方面有了较大变化，特别是在<Route>组件的使用方式上。本文将分享在实际项目中通过自定义Hook实现路由守卫的经验。

问题背景

在v6中，<Route>不再支持直接使用component属性，而是需要使用element属性来传递组件。这导致原有的权限控制逻辑需要重新设计。

解决方案

我们创建了一个自定义Hook useAuth 来处理权限验证：

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

export const useAuth = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [loading, setLoading] = useState(true);
  const navigate = useNavigate();

  useEffect(() => {
    const checkAuth = async () => {
      try {
        // 模拟权限检查
        const token = localStorage.getItem('token');
        if (token) {
          setIsAuthenticated(true);
        } else {
          navigate('/login');
        }
      } catch (error) {
        navigate('/login');
      } finally {
        setLoading(false);
      }
    };

    checkAuth();
  }, [navigate]);

  return { isAuthenticated, loading };
};

然后创建一个ProtectedRoute组件：

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

export const ProtectedRoute = ({ children }) => {
  const { isAuthenticated, loading } = useAuth();

  if (loading) return <div>Loading...</div>;
  
  return isAuthenticated ? children : <Navigate to="/login" />;
};

使用方式

在路由配置中使用：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route 
          path="/dashboard" 
          element={
            <ProtectedRoute>
              <Dashboard />
            </ProtectedRoute>
          }
        />
      </Routes>
    </BrowserRouter>
  );
}