如何解决不能读取未定义的属性（读取'pathname'）

我使用了所有最新的版本和风格化的组件，这是我的App.js文件

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
    
function App() {
  return (
    <div className="App">
      <GlobalStyle/>
      <Router>
        <Navbar />
        <Routes>
          <Route path="/" exact element={<Hero />} />
          <Route path="/projects" exact element={<Projects />} />
          <Route path="/about" exact element={<About />} />
        </Routes>
      </Router>
    </div>
  );
}