v6升级实战：路由守卫中useNavigate的正确使用方法

在React Router v6的升级过程中，路由守卫的实现方式发生了显著变化。v6不再支持直接在路由配置中使用component属性，而是推荐使用element属性配合组件进行路由渲染。这使得在路由守卫中正确使用useNavigate变得尤为重要。

问题场景

在升级到v6后，许多开发者发现原有的路由守卫逻辑失效，特别是在需要根据用户权限或登录状态进行重定向的场景中。

解决方案

首先，我们需要创建一个自定义的路由守卫组件：

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const ProtectedRoute = ({ children }) => {
  const navigate = useNavigate();
  
  useEffect(() => {
    // 检查用户权限或登录状态
    const isAuthenticated = checkAuth();
    if (!isAuthenticated) {
      navigate('/login', { replace: true });
    }
  }, [navigate]);
  
  return children;
};

const checkAuth = () => {
  // 实现你的认证逻辑
  return localStorage.getItem('token') !== null;
};

然后在路由配置中使用：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: '/',
    element: <ProtectedRoute><Home /></ProtectedRoute>
  },
  {
    path: '/login',
    element: <Login />
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

关键要点

useNavigate必须在组件内部调用，不能在函数组件外部使用
使用replace: true避免用户返回到上一个页面
在useEffect中进行权限检查，确保组件挂载后执行
通过element属性传递保护的路由组件

这种实现方式不仅兼容v6的路由体系，还能保证路由守卫的正确性和可维护性。

HotDance · 2026-01-08T10:24:58

这方案看似解决了v6路由守卫问题，但把权限检查硬塞进组件didMount逻辑里，实际体验差，建议用更优雅的Route element + useLocation监听方式，避免不必要的渲染。

微笑绽放 · 2026-01-08T10:24:58

关键点说了一堆，但没提异步认证场景怎么办？比如token过期需要刷新，直接用navigate跳转太生硬，应该配合context或store做状态管理，不然容易出现页面闪现问题。

CalmWater · 2026-01-08T10:24:58

这种写法在嵌套路由下会出问题，子路由的权限判断逻辑被父组件覆盖了。建议把权限逻辑抽成hook，再通过useLocation判断当前路径做更精细的控制，而不是一刀切的element包裹

v6升级实战：路由守卫中useNavigate的正确使用方法