如何在使用React Router的React应用中集成Google Analytics 4？

依赖包选择 #

两个同功能包的选择逻辑非常明确：

• 优先选react-ga4：这是目前生态里维护最稳定、下载量最高的GA4适配库，API设计对齐老版react-ga，迁移成本极低，兼容所有G-开头的GA4测量ID
• 不要用react-ga-4：这是个人fork的非官方维护包，更新频率极低，存在React 18+、React Router v6兼容性隐患，不适合生产环境使用

完整配置步骤 #

1. 安装依赖 #

根据你用的包管理器执行对应命令：

# npm 用户
npm install react-ga4

# yarn 用户
yarn add react-ga4

2. 编写路由监听上报逻辑 #

注意：React Router v6的钩子必须在BrowserRouter上下文内部调用，不能直接在包裹Router的外层组件里直接用useLocation，所以单独抽一个无UI的监听组件即可，不会影响原有业务逻辑。
首先在App.js顶部引入需要的依赖：

import { useEffect } from 'react';
import { BrowserRouter, Routes, Route, useLocation } from 'react-router-dom';
import ReactGA from 'react-ga4';
// 保留你原有的页面组件引入，比如Landing、Quiz等

然后添加路由监听组件：

// 路由变化时自动上报页面浏览事件
const RouteChangeTracker = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.send({
      hitType: "pageview",
      page: location.pathname + location.search
    });
  }, [location]);

  return null;
};

3. 修改原有App组件 #

把初始化逻辑和监听组件插入到你原有的代码结构里，完全保留之前的className判断、路由配置逻辑，修改后的完整代码如下：

function App() {
  // 应用首次挂载时初始化GA，只执行一次
  useEffect(() => {
    // 把下面的G-XXXXXXXXXX替换成你自己的GA4测量ID
    ReactGA.initialize("G-XXXXXXXXXX");
  }, []);

  return (
    <div className={ window.location.pathname === '/' ? "App" : "App AppOV"}>
      <BrowserRouter>
        {/* 放在Router内部，保证能拿到路由上下文 */}
        <RouteChangeTracker />
        <Routes>
          <Route path="/" element={<Landing/>} />
          <Route path="/quiz" element={<Quiz/>} />
          <Route path="/caja-de-herramientas" element={<Caja/>} />
          <Route path="/guia-autocorrecion" element={<GuiaAuto/>} />
          <Route path="/caja-de-herramientas/sustantivos" element={<Sustantivos/>} />
          <Route path="/caja-de-herramientas/pronombres" element={<Pronombres/>} />
          <Route path="/caja-de-herramientas/expresiones" element={<Expresiones/>} />
          <Route path="/caja-de-herramientas/nuevos-morfemas" element={<NuevosMorfemas/>} />
          <Route path="/que-sentido-tiene-el-lenguaje-inclusivo" element={<Texto/>} />
          <Route path="/acerca-del-proyecto" element={<Acerca/>} />
          <Route path="/caja-de-herramientas/herramientas" element={<Herramienta/>} />
        </Routes> 
      </BrowserRouter>
    </div>
  );
}

注意：原代码里判断路径用的是==，建议改成严格等于===，避免隐式类型转换带来的判断异常。

自定义事件上报（可选） #

如果需要上报按钮点击、表单提交等自定义行为，直接在对应事件回调里调用ReactGA.event即可，示例：

const handleQuizSubmit = () => {
  // 上报测验提交事件
  ReactGA.event({
    category: "UserAction",
    action: "submit_quiz",
    label: "quiz_page"
  });
  // 剩余业务逻辑
}

配置验证 #

配置完成后可以按以下方式验证是否生效：

• 关闭浏览器的广告拦截插件（这类插件默认会拦截GA上报请求）
• 打开GA4后台的「实时」报告板块
• 访问本地/线上的站点，切换不同路由，查看实时报告里的活跃用户、当前浏览路径是否和你的操作匹配，能正常匹配即配置完成。

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