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

从React Router v5升级到v6后，路由权限控制的实现方式发生了重大变化。本文分享在实际项目中遇到的踩坑经验。

v5 vs v6核心差异

在v5中，我们通过<Route>组件的render属性来实现权限控制：

<Route path="/admin" render={(props) => 
  isAuthenticated ? <Admin {...props} /> : <Redirect to="/login" />
}/>

但v6完全移除了component和render属性，改为使用element属性配合useRoutes。权限控制需要重新设计。

实现方案

方法一：自定义Route组件

const PrivateRoute = ({ children }) => {
  const { isAuthenticated } = useAuth();
  const location = useLocation();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  
  return children;
};

// 使用
<Routes>
  <Route path="/dashboard" element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  } />
</Routes>

方法二：自定义Hook封装

const useAuthRoute = (path, component) => {
  const { isAuthenticated } = useAuth();
  
  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }
  
  return React.createElement(component);
};

常见问题与解决方案

1. 权限验证逻辑不生效：确保在正确的路由层级使用，避免组件未重新渲染
2. 重定向丢失历史记录：使用state={{ from: location }}保存来源路径
3. 嵌套路由权限：建议将权限控制放在父级路由，避免重复代码

通过以上实践，成功实现了v6版本的路由权限控制，建议团队在升级时重点关注这些变更点。