reactjs - 未捕获的类型错误 : Cannot read properties of undefined (reading 'location' )

Question

我在从 useLocation() Hook 访问位置时收到此错误消息。实际上，我正在尝试将谷歌分析添加到我的 React 应用程序中，但我收到了此错误消息。未捕获的类型错误:无法读取未定义的属性(读取“位置”)

使用GaTracker钩子(Hook)代码:

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 Hook 正在 BrowserRouter 中使用，因此它上面没有路由上下文 react 树。

要解决，请将路由器移动到呈现组件 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>
    </>
  )
}