v6版本升级后路由跳转安全机制记录

最近在将项目从React Router v5升级到v6的过程中，遇到了一个令人头疼的问题：路由跳转的安全性检查机制出现了异常。这个问题在升级后表现得尤为明显，特别是在处理用户权限验证和路由守卫时。

问题现象

在升级后，我们发现使用useNavigate进行程序化导航时，如果目标路由需要权限验证，但用户未登录，页面会直接跳转而没有经过预期的重定向逻辑。这导致了未授权访问的风险。

复现步骤

在v6中创建一个受保护的路由组件：

const ProtectedRoute = () => {
  const navigate = useNavigate();
  const isAuthenticated = useAuth();
  
  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/login', { replace: true });
    }
  }, [isAuthenticated, navigate]);
  
  return isAuthenticated ? <Outlet /> : null;
};

配置路由：

<Routes>
  <Route path="/login" element={<Login />} />
  <Route element={<ProtectedRoute />}>  
    <Route path="/dashboard" element={<Dashboard />} />
  </Route>
</Routes>

发现问题：当用户未登录时，页面直接跳转到/dashboard而没有触发重定向逻辑。

解决方案

通过深入研究v6文档，发现需要在路由配置中添加useEffect进行路由守卫检查，并确保使用useLocation来获取当前路径信息，避免循环重定向的问题。最终的解决方案是：

const ProtectedRoute = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const isAuthenticated = useAuth();
  
  useEffect(() => {
    if (!isAuthenticated && location.pathname !== '/login') {
      navigate('/login', { replace: true });
    }
  }, [isAuthenticated, location.pathname, navigate]);
  
  return isAuthenticated ? <Outlet /> : null;
};

这个升级过程提醒我们在v6中需要更加谨慎地处理路由安全机制，不能像v5那样依赖简单的Redirect组件来实现权限控制。