ReactRouter升级 v2 to v4
概述
react-router V4 相对于react-router V2 or V3 几乎是重写了, 新版的react-router更偏向于组件化(everything is component)。
V4
汲取了很多思想,路由即是组件,使路由更具声明式,且方便组合。如果你习惯使用react
,那么一定会很快上手新版的react-router
。
react-router V4 被一分为三: react-router-dom
(for web)、react-router-native
(for native)、react-router
(core)。但如果仅在浏览器中使用的话,一般只需要用到react-router-dom
就可以了。
改动点
1. Router/Route 的改变
// V2 or V3
import { Router, Route, hashHistory } from 'react-router';
<Router history={hashHistory}>
<Route path='/foo' component={Foo} />
<Route path='/bar' component={Bar} />
</Router>
// V4 Router组件里只能渲染一个组件
import {
HashRouter as Router,
Route
} from 'react-router-dom';
<Router>
<div>
<Route path='/foo' component={Foo} />
<Route path='/bar' component={Bar} />
</div>
</Router>
2. 组件嵌套
// V2 or V3 路由组件嵌套
import { Router, Route, hashHistory } from 'react-router';
<Router history={hashHistory}>
<Route path='/' component={App}>
<Route path='foo' component={Foo} />
<Route path='bar' component={Bar} />
</Route>
</Router>
// V4 Router 的路由组件嵌套
import {
HashRouter as Router,
Route,
Switch
} from 'react-router-dom';
<Router>
<Route path="/" component={(props) => (
<App {...props}>
<Switch>
<Route path='/foo' component={Foo} />
<Route path='/bar' component={Bar} />
</Switch>
</App>
)}/>
</Router>
3. 路由的生命周期
在react-router V4
中去掉了on****
的路由生命周期的钩子,但是你可以在组件中用componentDidMount
或 componentWillMount
代替 onEnter
,可以用componentWillUpdate
或 componentWillReceiveProps
代替 onUpdate
,你可以用componentWillUnmount
代替 onLeave
。
4. Link
// V2 or V3
import { Link } from 'react-router';
// V4
import { Link } from 'react-router-dom';
5. history.push and history.replace
// V2 or V3
history.push({
pathname: '/home',
query: {
foo: 'test',
bar: 'temp'
}
});
history.replace({
pathname: '/home',
query: {
foo: 'test',
bar: 'temp'
}
});
// V4
history.push({
pathname: '/home',
search: '?foo=test&bar=temp',
});
history.replace({
pathname: '/home',
search: '?foo=test&bar=temp',
});
6. props.params
// V2 or V3 获取params可以这么获取
this.props.params
// V4
this.props.match.params
7. location.query
// V2 or V3 获取query可以这么获取
this.props.location.query
// V4 去掉了location.query,只能使用search来获取,为了让其跟浏览器一样
// 如果想要兼容以前的location.query,可以使用query-string库解析一下
// 如: queryString.parse(props.location.search)
this.props.location.search
8. location.action
// V2 or V3 获取location的action
this.props.location.action
// V4 去掉了location.action, 放在了history里面
history.action
9.关于history
以前获取react-router里面的history库,可以这么获取:
import {hashHistory as history} from 'react-router';
react-router V4:
import createHashHistory as history from 'history/createHashHistory';
兼容处理
因为要从react-router V2
完全迁移到react-router V4
工作量还是挺大的,一下子难以完全迁移,所以对某些地方做了兼容处理。
history
import _ from 'lodash';
import queryString from 'query-string';
function processHistory(history) {
const _push = history.push;
const _replace = history.replace;
history.push = function (one) {
if (!_.isPlainObject(one)) {
return _push.apply(this, arguments);
}
const o = Object.assign({}, one);
if (o.query) {
o.search = queryString.stringify(o.query);
}
_push.apply(this, [o]);
};
history.replace = function (one) {
if (!_.isPlainObject(one)) {
return _replace.apply(this, arguments);
}
const o = Object.assign({}, one);
if (o.query) {
o.search = queryString.stringify(o.query);
}
_replace.apply(this, [o]);
};
return history;
}
export default processHistory;
props
import queryString from 'query-string';
const processReactRouterProps = (props) => {
const newProps = Object.assign({}, props);
newProps.location.query = queryString.parse(props.location.search);
newProps.location.action = newProps.history.action;
newProps.params = props.match.params || {}; // 不止 || 是否有意义
return newProps;
}
export default processReactRouterProps;
参考资料:
ReactRouter升级 v2 to v4的更多相关文章
- ubuntn 内核升级到LINUX v4.11.8:
升级到LINUX v4.11.8: http://kernel.ubuntu.com/~kernel-ppa/mainline/v4.11.8/linux-headers-4.11.8-041108_ ...
- react-router 从 v2/v3 to v4 迁移(翻译)
react-router v4 是完全重写的,所以没有简单的迁移方式,这份指南将为您提供一些步骤,以帮助您了解如何升级应用程序. 注意: 这份迁移指南适用于react-router v2和v3,但为简 ...
- GoogLeNet 之 Inception v1 v2 v3 v4
论文地址 Inception V1 :Going Deeper with Convolutions Inception-v2 :Batch Normalization: Accelerating De ...
- 从Inception v1,v2,v3,v4,RexNeXt到Xception再到MobileNets,ShuffleNet,MobileNetV2
from:https://blog.csdn.net/qq_14845119/article/details/73648100 Inception v1的网络,主要提出了Inceptionmodule ...
- 51nod Bash游戏(V1,V2,V3,V4(斐波那契博弈))
Bash游戏V1 有一堆石子共同拥有N个. A B两个人轮流拿.A先拿.每次最少拿1颗.最多拿K颗.拿到最后1颗石子的人获胜.如果A B都很聪明,拿石子的过程中不会出现失误.给出N和K,问最后谁能赢得 ...
- 魔方NewLife.Cube升级v2.0
魔方是一套集成权限管理的MVC管理后台,最具特色功能是模版覆盖机制,是XCode实体类的最佳搭档! v2.0.2017.1126 借助Ajax支持高级操作,如:删除选中.批量启用禁用等 用户管理增 ...
- 信驰达蓝牙4.0模块全面升级 v2.20 U最新发布
作为国际蓝牙联盟成员之一,德州仪器(TI)于2012年强势推出CC254X系列单芯片(SOC)低功耗蓝牙收发器,经典51内核,最强优势在于丰富的外围(21个IO,UART,SPI,USB2.0,PWM ...
- td-agent的v2,v3,v4版本区别
官方地址:https://docs.fluentd.org/quickstart/td-agent-v2-vs-v3-vs-v4
- react-router v4 路由规则解析
前言 react-router升级到4之后,跟前面版本比有了很大的差别. 例如包的拆分,动态路由等详细的差别就不说了,各位大神的总结也很到位,详细可以点击看看,All About React Rout ...
随机推荐
- 总结Flink状态管理和容错机制
本文来自8月11日在北京举行的 Flink Meetup会议,分享来自于施晓罡,目前在阿里大数据团队部从事Blink方面的研发,现在主要负责Blink状态管理和容错相关技术的研发. 本文主要内容如 ...
- MyEclipse 8.6 下载
Downloads: MyEclipse 8.6 for Eclipse Galileo Windows http://downloads.myeclipseide.com/downloads/pro ...
- HDU3488 Tour KM
原文链接http://www.cnblogs.com/zhouzhendong/p/8284304.html 题目传送门 - HDU3488 题意概括 给一个n的点m条边的有向图. 然后让你把这个图分 ...
- java06作业归档
动手动脑 阅读QiPan.java示例程序了解如何利用二维数组和循环语句绘制五子棋盘. package 归档作业6; import java.io.*; public class QIPAN { // ...
- P1433 吃奶酪 回溯法 优化
题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入输出格式 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块 ...
- 基于PySpark的网络服务异常检测系统 阶段总结(二)
在上篇博文中介绍了网络服务异常检测的大概,本篇将详细介绍SVDD和Isolation Forest这两种算法 1. SVDD算法 SVDD的英文全称是Support Vector Data Descr ...
- unity打aar包工具
需求: unity将游戏导出android工程之后,打成aar包的工具 第一种: 高版本的unity导出的android工程是android studio版的,那么打成aar的流程就是 1.build ...
- Spring boot中自定义Json参数解析器
转载请注明出处... 一.介绍 用过springMVC/spring boot的都清楚,在controller层接受参数,常用的都是两种接受方式,如下 /** * 请求路径 http://127.0. ...
- IIS7.0提示“请求筛选模块被配置为拒绝包含双重转义序列的请求”处理办法
请求筛选模块被配置为拒绝包含双重转义序列的请求.HTTP 错误 404.11 - Not Found 解决办法: 1.单击 开始 . 在 开始搜索 框中, 键入 Notepad. 右击 记事本 , 然 ...
- 转:自旋锁(spinlock)
自旋锁与互斥锁有点类似,只是自旋锁不会引起调用者睡眠,如果自旋锁已经被别的执行单元保持,调用者就一直循环在那里看是否该自旋锁的保持者已经释放了锁,"自旋"一词就是因此而得名. 由于 ...