history版本与React Router不兼容问题求助

这个报错本质是版本依赖冲突搞的鬼：你当前用的React Router版本（应该是v3.x）只兼容history v3.x，但项目里却混入了history v4.x或者更早的v2.x版本，直接触发了兼容性校验提示。

先排查问题根源 #

首先打开你的package.json，看看这两个依赖的版本：

• react-router-dom的版本号
• history的版本号（如果没直接安装，大概率是某个第三方依赖偷偷引入的）

也可以在终端执行命令，查看完整依赖树，揪出哪个包带进来了不兼容的history：

npm ls history

解决方案二选一 #

方案1：降级history到v3.x（适合不想改路由代码的情况）

如果你的react-router-dom是v3.x版本，直接把history固定为v3.x就能解决：

1. 卸载当前的history包：

npm uninstall history

2. 安装v3.x版本：

npm install history@3.x --save

要是是第三方依赖偷偷引入了高版本history，可以在package.json里加resolutions字段强制锁版本：

"resolutions": {
  "history": "3.x.x"
}

然后执行npm install重新安装依赖就行。

方案2：升级react-router-dom到兼容高版本history的版本（适合长期维护）

如果项目能接受路由代码的小改动，建议直接把react-router-dom升级到v4+版本（v4及以上适配history v4+）：

1. 卸载旧版本：

npm uninstall react-router-dom

2. 安装最新稳定版：

npm install react-router-dom --save

3. 注意：升级后要适配新的路由写法，比如v6和v3的写法差异不小：
   • 旧v3写法示例：

     import {HashRouter as Router, Route, IndexRoute} from 'react-router-dom';
     
     const App = () => (
       <Router>
         <Route path="/" component={Home}>
           <IndexRoute component={Home} />
           <Route path="/about" component={About} />
         </Route>
       </Router>
     );
     

   • 新v6写法示例：

     import {HashRouter as Router, Routes, Route} from 'react-router-dom';
     
     const App = () => (
       <Router>
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/about" element={<About />} />
         </Routes>
       </Router>
     );
     

为啥突然出这问题？ #

大概率是你最近执行了npm install，或者某个依赖更新时，间接引入了不兼容的history版本——很多第三方包会依赖history，如果它们指定的版本范围太宽，就可能偷偷把高版本装进来，直接导致冲突。

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