Reactjs React路由器出现“无法读取未定义的属性位置”错误

我正在做一个简单的React店面，我的路由器设置有一个bug。我提供了相关文件的截图和错误消息。路由器的文件流是Navbar.js->App.js->Index.js。我已经很长时间没有做任何路由了，所以如果我遗漏了一些细节或者我没有正确解释一些事情，我很抱歉。任何建议都会有帮助。

---

路由器组件只需要一次，就像在index.js中一样

Navbar.js不需要路由器组件，因此您可以删除它。另外，您在Navbar.js中导入路由器是错误的，在index.js中是正确的

---

从react Router dom导入{BrowserRouter as Router}

路由器组件只需要一次，就像在index.js中一样

Navbar.js不需要路由器组件，因此您可以删除它。另外，您在Navbar.js中导入路由器是错误的，在index.js中是正确的

---

从react Router dom导入{BrowserRouter as Router}

您需要在react类组件中使用this.props。this.props.history.location

您需要在React类组件中使用this.props。这个.props.history.location

我相信路由器组件告诉我们开始监听location。因此，在App.js中，首先将useLocation导入到您的dom中。然后让useEffect监听该位置，这样路由器就可以始终知道您所在的位置，从而确定要显示的路由组件

例如：

import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  useEffect(() => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
  }, [location]);
  return ( ...
}

---

我相信路由器组件告诉我们开始监听位置。因此，在App.js中，首先将useLocation导入到您的dom中。然后让useEffect监听该位置，这样路由器就可以始终知道您所在的位置，从而确定要显示的路由组件

例如：

import { useLocation } from 'react-router-dom';

function App() {
  const location = useLocation();
  useEffect(() => {
    const currentPath = location.pathname;
    const searchParams = new URLSearchParams(location.search);
  }, [location]);
  return ( ...
}