如何在React Router中无需重复代码，为指定50个页面实现History存入全局存储？

以下是几个能避免在50个页面重复调用工具函数的实现方式，按需选择即可：

方案1：高阶组件（HOC）封装 #

写一个通用的页面统计高阶组件，把需要统计的页面组件用它包裹，只需在组件导出时做一次处理。

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

// 全局存储示例，实际项目可替换为Redux、Zustand等状态管理库
let pageVisitHistory = [];

const withPageTracker = (WrappedComponent) => {
  return (props) => {
    const history = useHistory();

    useEffect(() => {
      const currentLoc = history.location;
      // 存入路径、查询参数和时间戳等信息
      pageVisitHistory.push({
        path: currentLoc.pathname,
        search: currentLoc.search,
        timestamp: Date.now()
      });
      // 如果用状态管理，这里替换为dispatch对应action
      // dispatch(recordPageVisit({ path: currentLoc.pathname, ... }));
    }, [history.location]);

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

// 使用示例：在目标页面组件导出时包裹
export default withPageTracker(OrderListPage);

优点：每个页面可独立控制是否开启统计，侵入性低；缺点：需逐个修改目标页面的导出语句。

方案2：自定义Hook + 路由布局组件 #

创建一个带统计逻辑的布局组件，在路由配置中给需要统计的页面指定该布局，页面组件本身无需修改。

// 自定义统计Hook
import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

let pageVisitHistory = [];

export const usePageTracker = () => {
  const history = useHistory();

  useEffect(() => {
    const currentLoc = history.location;
    pageVisitHistory.push({
      path: currentLoc.pathname,
      search: currentLoc.search,
      timestamp: Date.now()
    });
  }, [history.location]);
};

// 统计布局组件
const TrackedPageLayout = ({ children }) => {
  usePageTracker();
  return <>{children}</>;
};

// 路由配置示例
import { Routes, Route } from 'react-router-dom';
import UserProfile from './pages/UserProfile';
import Home from './pages/Home';

export default function AppRoutes() {
  return (
    <Routes>
      {/* 需要统计的页面用TrackedPageLayout包裹 */}
      <Route path="/user/profile" element={<TrackedPageLayout><UserProfile /></TrackedPageLayout>} />
      {/* 无需统计的页面直接渲染 */}
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

优点：在路由层面统一管理统计规则，页面组件无感知；缺点：路由配置需逐个修改目标页面的路由项。

方案3：全局路由监听 #

在应用根组件中监听全局路由变化，通过路径白名单判断是否需要统计，完全无需修改页面和路由组件。

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

// 需要统计的页面路径列表，支持静态路径或正则匹配
const trackedPaths = [
  '/user/profile',
  '/order/list',
  /^\/product\/\d+$/ // 匹配动态路径如/product/123
];

let pageVisitHistory = [];

export default function App() {
  const history = useHistory();

  useEffect(() => {
    // 监听路由变化
    const unlisten = history.listen((location) => {
      // 判断当前路径是否在统计范围内
      const needTrack = trackedPaths.some(item => {
        if (typeof item === 'string') {
          return item === location.pathname;
        }
        // 处理正则匹配的动态路径
        return item.test(location.pathname);
      });

      if (needTrack) {
        pageVisitHistory.push({
          path: location.pathname,
          search: location.search,
          timestamp: Date.now()
        });
      }
    });

    // 组件卸载时取消监听
    return unlisten;
  }, [history]);

  return (
    // 应用根内容
  );
}

优点：零侵入，只需维护路径白名单，适合批量统计场景；缺点：动态路径需要用正则匹配，白名单维护需注意准确性。

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