未捕获的类型错误：无法读取未定义的属性（读取“位置”）

Question

我在从 useLocation() 挂钩访问位置时收到此错误消息。实际上我正在尝试将谷歌分析添加到我的反应应用程序中，但我收到了这个错误消息。 Uncaught TypeError: Cannot read properties of undefined (reading 'location')

使用GaTracker挂钩代码：

import { useEffect, useState } from "react"
import { useLocation } from "react-router-dom"
import ReactGA from "react-ga"

const useGaTracker = () => {
  const location = useLocation()
  const [initialized, setInitialized] = useState(false)
  console.log(location)

    useEffect(() => {
      if (!window.location.href.includes("localhost")) {
        ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS_KEY)
        setInitialized(true)
      }
    }, [])

    useEffect(() => {
      if (initialized) {
        ReactGA.pageview(location.pathname + location.search)
      }
    }, [initialized, location])
}

export default useGaTracker

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"))

const App = () => {
  useGaTracker()
  return (
    <BrowserRouter>
      <Helmet>
        <title>CODINGSPACE - Learn by Building Web and Mobile Apps</title>
      </Helmet>
      <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>
    </BrowserRouter>
  )
}

export default App

任何人都请帮我解决这个问题

Answer 1

useGaTracker 钩子正在在BrowserRouter 之外使用，因此在 ReactTree 中它上面没有路由上下文。

要解决，将路由器移动到渲染组件App，以便提供路由上下文。这可能是 index.js 文件。 （您通常也会在此处使用 AuthProvider 包装应用程序）

例子：

... other imports ...
import { BrowserRouter as Router } from 'react-router-dom';
import { AuthProvider } from "./context/AuthContext"

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <AuthProvider>
      <Router>
        <App />
      </Router>
    </AuthProvider>
  </StrictMode>,
  rootElement
);

...

const App = () => {
  useGaTracker(); // <-- has a routing context now!

  return (
    <>
      <Helmet>
        <title>CODINGSPACE - Learn by Building Web and Mobile Apps</title>
      </Helmet>
      <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>
    </>
  )
}