v6路由权限控制踩坑：路由守卫实现方式变化解析

React Router v6的发布带来了许多重要变化，其中路由权限控制的实现方式发生了显著改变。在v5中，我们可以通过<Route>组件的component或render属性来实现路由守卫，但在v6中，这种直接方式已被废弃。

核心变化

v6引入了useNavigate和useLocation钩子，并通过element属性来渲染组件。要实现权限控制，我们需要创建一个自定义的路由包装器组件。

问题场景

在升级过程中，我遇到一个典型问题：原v5代码中使用<Route component={ProtectedComponent} />进行权限验证，在v6中会报错。正确的做法是将权限检查逻辑封装到路由组件内部。

解决方案

// v6正确实现方式
function ProtectedRoute({ children }) {
  const navigate = useNavigate();
  const location = useLocation();
  
  useEffect(() => {
    // 权限检查逻辑
    if (!isAuthenticated()) {
      navigate('/login', { 
        replace: true,
        state: { from: location } 
      });
    }
  }, [navigate, location]);
  
  return isAuthenticated() ? children : null;
}

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

踩坑总结