添加React Router后React应用报Cannot read properties of undefined (reading 'location')错误

• 你使用了react-router-dom导出的底层Router组件，但没有为其传递必填的history属性。Router是所有路由组件的底层抽象，本身不内置history实现，缺失该属性时内部无法获取location对象，就会抛出该报错。
• 如果你安装的是react-router-dom v6版本，还存在额外的兼容问题：v6已经移除了Switch组件替换为Routes，且不再支持component参数，改为element参数传递组件，同时v6同样推荐直接使用封装好的BrowserRouter/HashRouter，不需要手动引入底层Router。

场景1：使用react-router-dom v5版本 #

不需要手动使用底层Router，直接替换为封装好的BrowserRouter（哈希路由则用HashRouter）即可，它们内置了history实例：

// 修改导入语句
import { BrowserRouter as 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;

如果你确实需要自定义history实例，需要先安装history库，再手动传入Router：

import { Router, Switch, Route } from "react-router-dom";
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();

function App() {
 return (
   <Router history={history}>
     {/* 其余代码不变 */}
   </Router>
 );
}

场景2：使用react-router-dom v6版本 #

需要调整写法适配v6的API规范：

// 导入对应v6的API
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
 return (
   <Router>
     <div className="App">
       <Header />
       {/* Switch替换为Routes */}
       <Routes>
         {/* component改为element，传递组件实例 */}
         <Route path="/" element={<MainPage />}></Route>
       </Routes>
     </div>
   </Router>
 );
}

内容的提问来源于stack exchange，提问作者Sadeen Alaa