获得徽章 0
赞了这篇文章
赞了这篇沸点
![[庆祝]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web_seo/img/jj_emoji_123.da47506.png)
![[玫瑰]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web_seo/img/jj_emoji_103.6c2eed8.png)
![[奋斗]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web_seo/img/jj_emoji_29.2801857.png)
![[握手]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web_seo/img/jj_emoji_110.34d5723.png)
赞了这篇沸点
，(´;︵;`)，爱掘金![[机智]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web_seo/img/jj_emoji_51.e6d838e.png)
![[泣不成声]](http://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web_seo/img/jj_emoji_40.348108b.png)
赞了这篇文章
赞了这篇沸点
说一下 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
赞了这篇文章
赞了这篇文章