React Router v6是否有类似Vue Router beforeEach的路由守卫方法？

React Router v6没有和Vue Router beforeEach完全一一对应的API，但可以通过几种实用方式实现类似的全局/路由级导航拦截逻辑，以下是具体方案：

一、全局前置导航拦截（对应全局beforeEach） #

如果需要监听所有路由跳转并做全局校验，可以结合useLocation、useNavigate和useEffect实现，同时用ref保存上一次路由来模拟Vue的from参数：

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

function AppLayout() {
  const location = useLocation();
  const navigate = useNavigate();
  const previousLocation = React.useRef(location);

  useEffect(() => {
    // to: 即将进入的目标路由，from: 上一次的路由
    const to = location;
    const from = previousLocation.current;

    // 示例：未登录时拦截后台路由
    if (to.pathname.startsWith('/admin') && !localStorage.getItem('token')) {
      // 类似Vue的next('/login')，replace避免回退到拦截前的路由
      navigate('/login', { replace: true });
      return;
    }

    // 允许导航，更新上一次路由记录
    previousLocation.current = location;
  }, [location, navigate]);

  return <Outlet />;
}

注：这种方式是导航启动后触发，但通过navigate的replace选项可以覆盖当前导航，达到拦截效果。

二、路由级守卫（局部拦截） #

如果只需要保护特定路由，推荐封装一个守卫组件，包裹需要校验的路由元素：

import { Navigate, Outlet } from 'react-router-dom';

function AuthGuard() {
  const isLoggedIn = () => localStorage.getItem('token') !== null;

  // 未登录则重定向到登录页，已登录则渲染子路由
  if (!isLoggedIn()) {
    return <Navigate to="/login" replace />;
  }
  return <Outlet />;
}

// 路由配置中使用
const router = createBrowserRouter([
  {
    path: '/admin',
    element: <AuthGuard />,
    children: [
      { path: '', element: <AdminDashboard /> },
      { path: 'settings', element: <AdminSettings /> },
    ],
  },
  { path: '/login', element: <LoginPage /> },
]);

三、用Loader函数做路由前置校验 #

React Router v6的loader函数会在路由渲染之前执行，适合做路由级的前置校验，不会出现页面闪烁：

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

const router = createBrowserRouter([
  {
    path: '/admin',
    element: <AdminDashboard />,
    loader: () => {
      // 校验登录状态，未登录直接抛出重定向
      if (!localStorage.getItem('token')) {
        return redirect('/login');
      }
      // 可以同时预加载页面需要的数据
      return fetchAdminData();
    },
  },
]);

根据你的需求选择对应方案：全局拦截用useEffect+useLocation，局部路由保护用守卫组件，路由级前置校验用loader函数。

内容的提问来源于stack exchange，提问作者JCraine