v6版本路由权限验证方法

v6版本路由权限验证方法

从React Router v5升级到v6后，路由权限验证机制发生了重大变化。本文记录在实际项目中踩过的坑和解决方案。

核心问题

v6取消了<Route>组件的component属性，改用element属性来渲染组件。这导致原有的权限验证方式失效。

解决方案一：使用自定义Hook

// authHook.js
import { useNavigate } from 'react-router-dom';
import { useEffect } from 'react';

export const useAuth = () => {
  const navigate = useNavigate();
  
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      navigate('/login');
    }
  }, [navigate]);
};

// 在路由中使用
import { useAuth } from './authHook';

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

解决方案二：创建权限组件包装器

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

const PrivateRoute = ({ children }) => {
  const isAuthenticated = localStorage.getItem('token');
  
  return isAuthenticated ? children : <Navigate to="/login" />;
};

// 路由配置
<Routes>
  <Route path="/dashboard" element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  } />
</Routes>

常见坑点

1. useNavigate必须在路由组件内部使用，否则会报错
2. 权限验证逻辑要放在组件渲染前执行
3. 多级嵌套路由的权限验证需要逐层处理

通过以上方法，成功解决了v6版本的权限验证问题，建议在升级前做好充分测试。