React接入Google Analytics时useLocation读location属性undefined报错如何解决

云原生阿岚

2026-9-25

问题根因

useLocation 是 react-router-dom 提供的路由Hook，必须在BrowserRouter组件包裹的路由上下文内部调用。你当前的代码在App组件中先执行useGaTracker()，此时App还未渲染BrowserRouter，不存在路由上下文，因此调用useLocation时会抛出找不到location属性的错误。

解决方案

将useGaTracker的调用逻辑移到BrowserRouter内部的子组件中即可，修改后的App.js参考如下：

import React, { Suspense } from "react"
import { BrowserRouter, Switch, Route } from "react-router-dom"
import "./App.css"
import { Helmet } from "react-helmet"

import { AuthProvider } from "./context/AuthContext"

// custom components
import SideBar from "./components/layouts/SideBar"
import Navbar from "./components/layouts/Navbar"
import Footer from "./components/layouts/Footer"
import useGaTracker from "./hooks/useGaTracker"

// lazy loading components
const Dashboard = React.lazy(() => import("./components/dashboard/Dashboard"))

// 抽离内层业务组件，处于BrowserRouter路由上下文内部
const AppContent = () => {
  // 此处调用可以正常获取路由上下文
  useGaTracker()
  return (
    <AuthProvider>
      <div className="relative grid min-h-screen md:grid-cols-layout-tablet xl:grid-cols-layout-desktop grid-rows-layout-desktop md:gap-6">
        <Navbar />
        <SideBar />
        <Switch>
          <Suspense fallback={<div>Loading..</div>}>
            <Route exact path="/" component={Dashboard} />
          </Suspense>
        </Switch>
        <Feedback />
        <Footer />
      </div>
    </AuthProvider>
  )
}

const App = () => {
  return (
    <BrowserRouter>
      <Helmet>
        <title>CODINGSPACE - Learn by Building Web and Mobile Apps</title>
      </Helmet>
      <AppContent />
    </BrowserRouter>
  )
}

export default App