从v5到v6升级：React Router路由守卫实现方式大不同

React Router v6的发布带来了许多重大变化，其中最引人注目的莫过于路由守卫机制的重构。相比v5的Route组件配合component或render属性，v6彻底放弃了传统的路由组件化思路，转而采用更加灵活的useRoutes和Navigate API。

核心变化

在v5中，我们通过以下方式实现路由守卫：

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    isAuthenticated ? (
      <Component {...props} />
    ) : (
      <Redirect to="/login" />
    )
  )} />
);

而v6中，我们不能再直接在路由配置中使用component属性。相反，我们需要利用useRoutes Hook或者创建自定义的ProtectedRoute组件。

v6实现方案

方案一：自定义ProtectedRoute组件

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

const ProtectedRoute = ({ children }) => {
  const { isAuthenticated } = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }
  
  return children;
};

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

方案二：使用useRoutes API

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

function AppRoutes() {
  const routes = useRoutes([
    {
      path: '/',
      element: <Home />
    },
    {
      path: '/dashboard',
      element: (
        <ProtectedRoute>
          <Dashboard />
        </ProtectedRoute>
      )
    }
  ]);
  
  return routes;
}