说一下 react-router 3.x 升级 5.x 过程中的几个坑：
1. history 的版本号和 react-router-dom 的版本号要匹配。首先，history 库需要单独安装，其次一定要记得和 react-router-dom 5.x 相匹配的 history 版本号是 4.x；而和 react-router-dom 6.x 匹配的 history 版本号是 5.x。
2. react-router-dom 也有一个更为底层的 Router 组件（不是 BrowserRouter）。如果要使用自定义的 history 一定要使用 import {Router} from 'react-router-dom'，切记不能 import {BrowserRouter} from 'react-router-dom'。因为官网的例子给的大部分都是后者，所以很容易忽略。而且去文档里看，说的也是只有三种 Router，一种是 BrowserRouter，一种是 HashRouter，还有一种是给非浏览器用的 Router，根本没有提到用 Router 这个更底层的组件。
3. 很多类组件如果想用 location, match 等参数的话可以用 withRouter 这个装饰器。文档里给的示例基本都是函数式组件的例子，但是因为很多老项目升级的时候，都会有类组件，那么类组件如果要使用一些新的 api 的话就需要用 withRouter 包裹一下。
1. history 的版本号和 react-router-dom 的版本号要匹配。首先，history 库需要单独安装，其次一定要记得和 react-router-dom 5.x 相匹配的 history 版本号是 4.x；而和 react-router-dom 6.x 匹配的 history 版本号是 5.x。
2. react-router-dom 也有一个更为底层的 Router 组件（不是 BrowserRouter）。如果要使用自定义的 history 一定要使用 import {Router} from 'react-router-dom'，切记不能 import {BrowserRouter} from 'react-router-dom'。因为官网的例子给的大部分都是后者，所以很容易忽略。而且去文档里看，说的也是只有三种 Router，一种是 BrowserRouter，一种是 HashRouter，还有一种是给非浏览器用的 Router，根本没有提到用 Router 这个更底层的组件。
3. 很多类组件如果想用 location, match 等参数的话可以用 withRouter 这个装饰器。文档里给的示例基本都是函数式组件的例子，但是因为很多老项目升级的时候，都会有类组件，那么类组件如果要使用一些新的 api 的话就需要用 withRouter 包裹一下。
展开
1
2
![[无辜呆]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_96.4fb9d71.png)