前言
今年3月初发布了react-router v4,相较之前的v3和v2版本做了一个破坏性的升级。遵循一切皆React Component的理念。静态路由变成了动态路由。这里记录下v3项目如何迁移到v4。
项目地址:https://github.com/YutHelloWorld/vortex-react
迁移步骤
对React-Router和Redux同步进行重构
重写路由
代码分割
琐碎的API替换
详细代码参阅这个PR
React-Router和Redux同步
这里我们仍然不使用react-router-redux这个库。为了和react-routerv4版本保持一致,react-router-redux发布了v5.0.0版本,你当然也可以使用它来实现这个功能。
1. 替换依赖包
v3我们引入的是react-router包,在v4我们只引入react-router-dom这个包。安装react-router-dom时会同时安装history。
package.json
- "react-router": "^3.0.0",
+ "react-router-dom": "^4.1.2",
2. 改写对browserHistory的创建和当前location的获取
location.js
// v3
import { browserHistory } from 'react-router'
// 获取当前location
const initialState = browserHistory.getCurrentLocation()
==>
// v4
import createHistory...
React-Router