如何在react-router-dom中自定义中间件记录用户页面跳转历史？

不需要借助小众第三方库，React Router本身提供的API足够实现页面跳转历史记录，以下是几种适配你现有代码的实用方案：

方案一：全局路由监听组件（推荐） #

创建一个无UI的监听组件，放在路由顶层，通过useLocation钩子监听所有路径变化，自动记录客户端导航、页面刷新等场景的跳转行为。

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

export const RouteHistoryTracker = () => {
  const location = useLocation();
  // 用localStorage持久化，也可替换为React Context/Redux实现全局状态共享
  const [historyStack, setHistoryStack] = useState<string[]>(
    JSON.parse(localStorage.getItem('routeHistory') || '[]')
  );

  useEffect(() => {
    // 记录完整路径（含搜索参数），避免重复记录同一路径的状态更新
    const currentFullPath = location.pathname + location.search;
    if (historyStack.at(-1) !== currentFullPath) {
      const updatedHistory = [...historyStack, currentFullPath];
      // 可选：限制历史记录长度，仅保留最近15条
      const trimmedHistory = updatedHistory.slice(-15);
      
      setHistoryStack(trimmedHistory);
      localStorage.setItem('routeHistory', JSON.stringify(trimmedHistory));
      
      // 可在此添加后端上报逻辑
      // fetch('/api/log-route', { method: 'POST', body: JSON.stringify({ path: currentFullPath }) });
    }
  }, [location, historyStack]);

  return null;
};

集成到你的路由配置： #

将组件放在顶层布局内，确保所有路由变化都能被监听：

const browserRouter = createBrowserRouter([
  {
    errorElement: <BubbleError />,
    children: [
      {
        element: (
          <>
            <RouteHistoryTracker />
            {createElement(enhance(GenericLayout))}
          </>
        ),
        children: [PageRoute1, PageRoute2],
      },
      {
        element: createElement(enhance(EmptyLayout)),
        children: [page404Route],
      },
      {
        loader: async () => redirect(PATH_KEYS.page404),
        path: '*',
      },
    ],
  }
]);

// 或在根组件的RouterProvider内直接渲染
function App() {
  return (
    <RouterProvider router={browserRouter}>
      <RouteHistoryTracker />
    </RouterProvider>
  );
}

方案二：高阶组件包裹页面组件 #

如果仅需给特定页面添加记录逻辑，可封装一个高阶组件（HOC），和你现有的withSuspense组合使用：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { ComponentType } from 'react';

const withHistoryTracking = <Props extends object>(Component: ComponentType<Props>) => {
  const Wrapped = (props: Props) => {
    const location = useLocation();

    useEffect(() => {
      const currentFullPath = location.pathname + location.search;
      const history = JSON.parse(localStorage.getItem('routeHistory') || '[]');
      
      if (history.at(-1) !== currentFullPath) {
        history.push(currentFullPath);
        localStorage.setItem('routeHistory', JSON.stringify(history));
      }
    }, [location]);

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

  Wrapped.displayName = `withHistoryTracking(${Component.displayName || Component.name || 'Unknown'})`;
  return Wrapped;
};

整合到你的enhance函数： #

const enhance = compose(
  withHistoryTracking,
  (component) => withSuspense(component, { fallback: <Loader /> })
);

所有被enhance包裹的页面组件，都会在挂载时自动记录当前路径。

方案三：路由Loader统一记录 #

如果仅需记录通过路由Loader加载的页面（如初始加载、刷新、Link跳转），可封装Loader包装器：

const withHistoryTrackingLoader = (originalLoader?: () => Promise<any>) => {
  return async ({ request }) => {
    const currentPath = new URL(request.url).pathname;
    const history = JSON.parse(localStorage.getItem('routeHistory') || '[]');
    
    if (history.at(-1) !== currentPath) {
      history.push(currentPath);
      localStorage.setItem('routeHistory', JSON.stringify(history));
    }

    // 执行原Loader逻辑
    if (originalLoader) {
      return await originalLoader();
    }
    return null;
  };
};

给路由添加包装后的Loader： #

export const PageRoute1: RouteObject = {
  path: 'other-path/page',
  element: createElement(enhance(MyReactComponent)),
  loader: withHistoryTrackingLoader()
  // 有原Loader时传入：withHistoryTrackingLoader(yourOriginalLoader)
};

注意事项： #

• 若需组件间共享历史记录，建议用React Context或Redux替代localStorage，减少本地存储读写开销。
• 如需记录完整页面状态（含哈希、搜索参数），用location.href或location.pathname + location.search + location.hash替代单纯的pathname。
• 可添加去重逻辑，避免重复记录同一页面的频繁状态变化。

内容的提问来源于stack exchange，提问作者Александр Кос