TypeError：添加路由时无法读取未定义的属性（读取“位置”）

【问题标题】：TypeError: Cannot read properties of undefined (reading 'location') When Adding RouteTypeError：添加路由时无法读取未定义的属性（读取“位置”）
【发布时间】：2021-11-27 10:35:38
【问题描述】：

React 应用程序一直在工作，直到我添加了 React Router 才显示此错误

TypeError: Cannot read properties of undefined (reading 'location')

反应应用

import { Router, Switch, Route } from "react-router-dom";
function App() {
 return (
   <Router>
     <div className="App">
       <Header />
       <Switch>
         <Route path="/" component={MainPage}></Route>
       </Switch>
     </div>
   </Router>
 );
}

export default App;

【问题讨论】：

标签： javascript reactjs react-router router

【解决方案1】：

react-router-dom 不导出 Router 而是导出 BrowserRouter 所以代码应该是以下之一

第一

import { BrowserRouter, Switch, Route } from "react-router-dom";

      <div className="App">
        <Header />
        <Switch>
          <Route path="/" component={MainPage}></Route>
        </Switch>
      </div>
    </BrowserRouter>

第二

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

      <div className="App">
        <Header />
        <Switch>
          <Route path="/" component={MainPage}></Route>
        </Switch>
      </div>
    </Router>

【讨论】：