React Router 4是否有全局路由钩子？求自定义实现方案

嘿，这个问题问得好！React Router 4（包括后续的v5、v6版本）确实没有像Vue那样内置的全局路由钩子（比如router.beforeEach）——这是因为React Router的设计核心是「一切皆组件」，更倾向于用React本身的组件特性来实现这类功能。不过不用担心，我们完全可以通过自定义方案来实现类似的全局路由拦截/守卫功能，实用性一点也不弱，下面给你几个常用的靠谱方案：

方案1：用高阶组件（HOC）给路由组件加守卫 #

这种方式适合给单个或部分路由组件添加拦截逻辑，比如私有路由的权限验证：

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

// 定义路由守卫HOC
const withRouteGuard = (WrappedComponent) => {
  const RouteGuard = (props) => {
    const location = useLocation();
    const navigate = useNavigate();

    useEffect(() => {
      // 这里写你的拦截逻辑：比如检查登录状态、发起预请求
      const checkAuthAndPreload = async () => {
        // 示例1：检查用户是否登录
        const isLoggedIn = await fetch('/api/check-login').then(res => res.json());
        if (!isLoggedIn && location.pathname !== '/login') {
          navigate('/login', { replace: true });
          return;
        }

        // 示例2：路由跳转前发起API请求预加载数据
        await fetch(`/api/preload/${location.pathname}`);
      };

      checkAuthAndPreload();
    }, [location, navigate]);

    return <WrappedComponent {...props} />;
  };

  return RouteGuard;
};

// 使用方式：用HOC包裹需要守卫的路由组件
const Dashboard = () => <div>用户仪表盘</div>;
export default withRouteGuard(Dashboard);

方案2：全局守卫组件（覆盖所有路由） #

如果需要对所有路由统一做拦截（比如全局日志、全局权限检查），可以写一个全局守卫组件，放在路由的最外层：

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

const GlobalRouteGuard = ({ children }) => {
  const location = useLocation();
  const navigate = useNavigate();

  useEffect(() => {
    // 全局路由拦截逻辑：比如记录路由跳转日志、检查全局权限
    const handleRouteChange = async () => {
      console.log(`用户跳转到了：${location.pathname}`);
      
      // 示例：检查当前路由是否有权限访问
      const hasAccess = await fetch(`/api/check-access?path=${location.pathname}`).then(res => res.json());
      if (!hasAccess) {
        navigate('/403', { replace: true });
      }
    };

    handleRouteChange();
  }, [location, navigate]);

  return children;
};

// 使用方式：放在BrowserRouter内部，包裹所有路由
import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <GlobalRouteGuard>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/403" element={<ForbiddenPage />} />
        </Routes>
      </GlobalRouteGuard>
    </BrowserRouter>
  );
}

方案3：结合React Router v6新API做精准控制 #

如果你用的是React Router v6，可以用useNavigationType来区分路由跳转的类型（前进/后退/首次加载），实现更精细化的拦截：

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

const GlobalRouteGuard = ({ children }) => {
  const location = useLocation();
  const navigate = useNavigate();
  // 获取路由跳转类型："POP"（浏览器后退/前进）、"PUSH"（push跳转）、"REPLACE"（replace跳转）
  const navigationType = useNavigationType();

  useEffect(() => {
    // 示例：只对主动跳转（非浏览器后退）做拦截
    if (navigationType !== 'POP') {
      const beforeRouteEnter = async () => {
        // 比如跳转前验证用户会话有效性
        const sessionValid = await fetch('/api/check-session').then(res => res.json());
        if (!sessionValid) {
          navigate('/login', { replace: true });
        }
      };
      beforeRouteEnter();
    }
  }, [location, navigate, navigationType]);

  return children;
};

这些方案本质上都是利用React的useEffect监听路由变化，配合useNavigate做跳转控制，和Vue的router.beforeEach能实现的功能完全对齐——不管是权限验证、预加载数据还是拦截跳转，都能轻松搞定。你可以根据自己的项目需求选择最合适的方案~

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