问题
首先贡献上我的代码，最最最简单的例子，正常人都看得懂。。。
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function App() {
return (
<Router>
<div className="app-container">
<Switch>
<Route path="/home" component={Home} />
</Switch>
</div>
</Router>
);
}
export default App;
当我更换新的电脑，准备运行项目时，执行了下面两行命令
npm install
npm run start
诡异的事情发生了，居然控制台报了以下错误，明明早上在公司还是可以正常运行的，简直头疼。
Attempted import error: 'Switch' is not exported from 'react-router-dom'.
原因
经过一个国庆的查找，终于找到原因了，通过 package-lock.json 文件可以看到，安装的 react-router-dom 版本居然是 6.x，原来新的版本已经把 Switch 组件移除掉了，替换成 Route，还有使用方法上也做了一些小调整，真的是无语，版本还真不是越新越好。WTF。。。
解决
既然找到问题了，那么就根治它，避免复发。有两种解决方法
通过
package.json锁定react-router-dom版本为 v5.x使用 v6 版本新的写法
首先是引入方式的调整
// v5
import { Switch, Route } from "react-router-dom";
// v6
import { Routes ,Route } from 'react-router-dom';
接着是使用方式的调整
// v5
<Route path="/" component={Home} />
// v6
<Route path='/' element={<Home/>} />
看看最后的更新后的版本
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
function App() {
return (
<Router>
<div className="app-container">
<Routes>
<Route path="/home" element={Home} />
</Routes>
</div>
</Router>
);
}
