ReactGA集成故障：useLocation上下文错误及pathname未定义问题

问题背景 #

在React项目中集成Google Analytics时网站无法加载，最初遇到错误：

Uncaught Error: useLocation() may be used only in the context of a <Router> component.

给index.js添加<Router>后，又出现新错误：

components.tsx:197 Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

现有代码 #

index.js #

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HelmetProvider } from "react-helmet-async";
import { Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </Router>
);

App.js #

import React from "react";
import ReactGA from "react-ga";
import InitializeReactGA from "./components/helper/googleAnalytics";
import {
  BrowserRouter as Router,
  Routes,
  Route,
  useLocation,
} from "react-router-dom";
import { useEffect } from "react";

// ... 其他组件导入

const TRACKING_ID = "A-1234567890"
ReactGA.initialize(TRACKING_ID);

function usePageViews() {
    let location = useLocation();
    useEffect(() => {
        InitializeReactGA(ReactGA);
        ReactGA.set({ page: location.pathname });
        ReactGA.pageview(location.pathname);
    }, [location]);
}

function App() {
  usePageViews();

  return (
    <>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/abouts" element={<AboutUs />} />
          {/* 其他路由项 */}
        </Routes>
        <Footer />
      </Router>
    </>
  );
}

Google Analytics辅助代码 #

function InitializeReactGA(ReactGA) {
  if (!window.GA_INITIALIZED) {
    ReactGA.initialize("MANDO_GA");  // 此处为复制的代码，不清楚MANDO_GA含义
    window.GA_INITIALIZED = true;
  }
}

export default InitializeReactGA;

问题分析与解决方案 #

核心问题1：重复嵌套Router #

index.js中已经用<Router>包裹了App组件，但App.js内部又嵌套了一层<Router>，导致路由上下文冲突，useLocation()无法正确获取有效上下文，最终出现pathname未定义的错误。
解决：移除App.js中的<Router>标签，只保留顶层的Router容器（统一放在index.js或App.js最外层即可）。

核心问题2：GA初始化重复且参数错误 #

App.js中已经调用ReactGA.initialize(TRACKING_ID)，但辅助函数里又用无效的"MANDO_GA"重复初始化，导致GA实例异常。
解决：修改辅助函数，传入正确的跟踪ID，确保只初始化一次。

核心问题3：usePageViews的调用上下文 #

usePageViews钩子依赖useLocation()，必须在Router上下文内部调用，否则无法获取到location对象。
解决：确保App组件被Router包裹后，再调用usePageViews。

修改后的代码示例 #

index.js（保留顶层Router）

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { HelmetProvider } from "react-helmet-async";
import { BrowserRouter as Router } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Router>
    <HelmetProvider>
      <App />
    </HelmetProvider>
  </Router>
);

App.js（移除内部Router，修复GA逻辑）

import React from "react";
import ReactGA from "react-ga";
import InitializeReactGA from "./components/helper/googleAnalytics";
import { Routes, Route, useLocation, useEffect } from "react-router-dom";

// ... 其他组件导入

const TRACKING_ID = "A-1234567890";

function usePageViews() {
  const location = useLocation();
  
  useEffect(() => {
    // 传入正确的跟踪ID初始化GA
    InitializeReactGA(ReactGA, TRACKING_ID);
    ReactGA.set({ page: location.pathname });
    ReactGA.pageview(location.pathname);
  }, [location]);
}

function App() {
  usePageViews();

  return (
    <>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/abouts" element={<AboutUs />} />
        {/* 其他路由项 */}
      </Routes>
      <Footer />
    </>
  );
}

修改后的GA辅助代码

function InitializeReactGA(ReactGA, trackingId) {
  if (!window.GA_INITIALIZED) {
    ReactGA.initialize(trackingId);
    window.GA_INITIALIZED = true;
  }
}

export default InitializeReactGA;

额外注意事项 #

• 确保使用react-router-dom v6版本的正确API，BrowserRouter是官方推荐的路由容器。
• 不要在组件外部调用ReactGA.initialize，避免初始化时机过早导致的异常。

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