详解各版本React路由的跳转的方法


Posted in Javascript onMay 10, 2018

前言

React-Router已经发布了多个版本,利用路由导航的使用方法都不大一样,在这里总结一下。

React-Router 2.0.0 版本

2.0.0版本需要使用browserHistory进行跳转,具体参考一下代码:

import { browserHistory } from 'react-router'
browserHistory.push('/path')

React-Router 2.4.0版本以上

React-Router 2.4.0版本以上,可以通过mixin的方法,使组件增加this.router属性,然后进行相应的操作,具体mixin代码参考如下:

import { withRouter } from 'react-router';
clsss ABC extends Component {
}
module.exports = withRouter(ABC);

用过mixin的组件,会具有this.router的属性,只需要使用this.props.router.push('/path') 就可以跳转到相应的路由了。

React-Router 3.0.0版本以上

3.0.0版本以后不需要再手动mixin相关的router属性,在任何需要跳转的组件中写this.props.router.push('/path') 就可以跳转到响应的路由了。

React-Router 4.0版本以上

路由的跳转

React-Router 4.0对路由进行了改进,router属性改为了history属性,使用方法还是和3.0差不多,任何需要跳转的地方使用this.props.history.push('/path') 就可以进行跳转了

参数的获取

使用this.props.match.params.xxx 可以获取到当前路由的参数

总结

从以上的使用方法来看,react router的导航使用上变得越来越简单。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
javascript十个最常用的自定义函数(中文版)
Sep 07 Javascript
Json对象替换字符串占位符实现代码
Nov 17 Javascript
动态加载iframe时get请求传递中文参数乱码解决方法
May 07 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
vue+koa2搭建mock数据环境的详细教程
May 18 Javascript
React路由管理之React Router总结
May 10 #Javascript
React从react-router路由上做登陆验证控制的方法
May 10 #Javascript
详解Angular路由之路由守卫
May 10 #Javascript
JavaScript实现一个简易的计算器实例代码
May 10 #Javascript
浅谈node.js 命令行工具(cli)
May 10 #Javascript
Js经典案例的实例代码
May 10 #Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 #Javascript
You might like
PHP统计二维数组元素个数的方法
2013/11/12 PHP
php猜单词游戏
2015/09/29 PHP
jQuery checkbox全选/取消全选实现代码
2009/11/14 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
2010/08/13 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
2015/09/07 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
JavaScript提升机制Hoisting详解
2019/10/23 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
Python中的heapq模块源码详析
2019/01/08 Python
python字符串反转的四种方法详解
2019/12/02 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
linux面试相关问题
2012/08/11 面试题
解决方案设计综合面试题
2015/08/31 面试题
测绘工程专业个人自我评价
2013/12/01 职场文书
咨询公司各岗位职责
2013/12/02 职场文书
致400米运动员广播稿
2014/02/07 职场文书
运动会开幕式主持词
2014/03/28 职场文书
难忘的一天教学反思
2014/04/30 职场文书
道德演讲稿
2014/05/21 职场文书
企业形象策划方案
2014/05/29 职场文书
公司大门门卫岗位职责
2014/06/11 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
幼儿园综治宣传月活动总结
2015/05/07 职场文书
年会主持人开场白台词
2015/05/29 职场文书
学校2016年全国助残日活动总结
2016/04/01 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS