v6路由守卫机制详解

React Router v6路由守卫机制详解

React Router v6相比v5在路由守卫机制上有了重大变革。本文将详细解析v6的路由守卫实现方式，并提供可复现的实践方案。

v6路由守卫核心变化

v6移除了v5中的<Route>组件的component和render属性，转而使用element属性来渲染组件。这使得路由守卫的实现更加灵活和直观。

基础守卫实现

import { Navigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const isAuthenticated = useAuth(); // 自定义认证hook
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return children;
};

// 使用方式
<Routes>
  <Route path="/dashboard" element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  } />
</Routes>

高级守卫模式

对于复杂的权限控制，可以创建更灵活的守卫组件：

const RoleBasedGuard = ({ allowedRoles, children }) => {
  const { user } = useAuth();
  
  if (!user || !allowedRoles.includes(user.role)) {
    return <Navigate to="/unauthorized" replace />;
  }
  
  return children;
};

// 多层守卫组合
<Route path="/admin" element={
  <ProtectedRoute>
    <RoleBasedGuard allowedRoles={['admin']}>
      <AdminPanel />
    </RoleBasedGuard>
  </ProtectedRoute>
} />