Javascript 如何解决此问题TypeError:无法读取属性'；地点'；未定义的？

我有一个成功的部署

useLocation
/Users/hvaandres/Desktop/Development/Ecommerce/modules/hooks.js:29
  26 |     );
  27 |   }
  28 | 
> 29 |   return useContext(Context).location;
  30 | }
  31 | 
  32 | export function useParams() {

成功：

Compiled successfully!

You can now view ecommerce-store in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.194:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

问题是，它来自一个hook.js文件，我在我的repo中没有看到这个文件：

如果我看一下chrome工具，这是我这期文章的参考资料

import React from "react";
import invariant from "tiny-invariant";

import Context from "./RouterContext.js";
import HistoryContext from "./HistoryContext.js";
import matchPath from "./matchPath.js";

const useContext = React.useContext;

export function useHistory() {
  if (__DEV__) {
    invariant(
      typeof useContext === "function",
      "You must use React >= 16.8 in order to use useHistory()"
    );
  }

  return useContext(HistoryContext);
}

export function useLocation() {
  if (__DEV__) {
    invariant(
      typeof useContext === "function",
      "You must use React >= 16.8 in order to use useLocation()"
    );
  }

  return useContext(Context).location;
}

export function useParams() {
  if (__DEV__) {
    invariant(
      typeof useContext === "function",
      "You must use React >= 16.8 in order to use useParams()"
    );
  }

  const match = useContext(Context).match;
  return match ? match.params : {};
}

export function useRouteMatch(path) {
  if (__DEV__) {
    invariant(
      typeof useContext === "function",
      "You must use React >= 16.8 in order to use useRouteMatch()"
    );
  }

  const location = useLocation();
  const match = useContext(Context).match;

  return path ? matchPath(location.pathname, path) : match;
}

如果我跟踪问题，它似乎位于调用useLocation（）的NavBar.js内部：

从“React”导入React，{useState}；
从“@material ui/core”导入{AppBar、工具栏、图标按钮、徽章、菜单项、菜单、排版}；
从“@material ui/icons”导入{ShoppingCart}；
从'react router dom'导入{Link，useLocation}；
从“../../assets/logo.png”导入徽标；
从“./styles”导入useStyles；
常量PrimarySearchAppBar=（{totalItems}）=>{
const[mobileMoreAnchorEl，setMobileMoreAnchorEl]=useState（null）；
const classes=useStyles（）；
const location=useLocation（）；
常量IsMobilElemenuOpen=布尔值（mobileMoreAnchorEl）；
常量handleMobileMenuClose=（）=>setMobileMoreAnchorEl（null）；
const mobileMenuId='主要搜索帐户菜单移动'；
常数rendermobileemenu=(
推车

);
返回(
，有人能帮我看看是什么问题，或者我犯了什么错误吗？
在App.js中
    in App.js
 import { BrowserRouter as Router} from "react-router-dom";
    then wrap your components inside Router
    
         <Router>
          <Navbar  totalItems={cart.total_items}/>
          {/* <Products products={products} onAddToCart={handleAddToCart}/> */}
          <Cart cart={cart}/>
          </Router>

从“react Router dom”导入{BrowserRouter as Router}；
然后把你们的组件包在路由器里
{/*  */}

这肯定会解决您的问题，因为您的组件正在尝试从useLocation（）使用location，因此您必须将您的组件包装在来自路由器dom的路由器中。请尝试使用可选链接。如果它未定义，则不会引发异常，而是返回未定义

return useContext(Context)?.location;

你需要发布更多关于你的代码的详细信息，而不仅仅是链接到你的github repo并期望人们浏览所有内容。由于这是我收到的唯一错误消息，我还应该在这里发布什么？首先，完整的堆栈跟踪，以便我知道错误来自何处。如果你注意第一行，你会看到它是这样说的：“/Users/hvaandres/Desktop/Development/Ecommerce/modules/hooks.js:29”但是，我的reportright中没有这个文件。因为这是一个react路由器文件。问题似乎是你正在调用
useLocation（）
代码中的某个地方或以不正确的方式出现。堆栈跟踪中应该列出更多文件，显示从何处调用。
return useContext(Context)?.location;