从v5到v6：React Router安全机制调整踩坑

在React Router v6版本升级过程中，安全机制的调整成为了开发者面临的主要挑战之一。本文将详细记录从v5到v6的迁移过程，并重点分析安全相关的变更。

升级前的v5安全实践

在v5版本中，我们通常通过<Route>组件的component或render属性来控制路由渲染。例如：

<Route path="/admin" component={AdminPanel} />
<Route path="/user" render={(props) => <UserProfile {...props} />} />

v6安全机制调整

v6版本移除了component和render属性，改为使用element属性。更重要的是，安全检查逻辑发生了变化：

<Route path="/admin" element={<AdminPanel />} />

核心踩坑点

1. 路由守卫重写

v5中的<PrivateRoute>组件需要重构为：

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

// v6
const PrivateRoute = () => {
  const isAuthenticated = useAuth();
  return isAuthenticated() ? <Outlet /> : <Navigate to="/login" />;
};

2. 嵌套路由安全

v6中嵌套路由需要使用<Routes>组件包裹：

<Routes>
  <Route path="/admin" element={<AdminLayout />}>
    <Route index element={<Dashboard />} />
    <Route path="users" element={<UserList />} />
  </Route>
</Routes>