详解各版本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 相关文章推荐
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Jan 13 Javascript
又一个小巧的图片预加载类
May 05 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
基于复选框demo(分享)
Sep 27 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
vue-star评星组件开发实例
Mar 01 Javascript
Vue的双向数据绑定实现原理解析
Feb 17 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
Smarty模板快速入门
2007/01/04 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
php mysql 封装类实例代码
2016/09/18 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
Laravel框架实现即点即改功能的方法分析
2019/10/31 PHP
Prototype使用指南之ajax
2007/01/10 Javascript
JavaScript Date对象使用总结
2009/05/14 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
教你在heroku云平台上部署Node.js应用
2014/07/30 Javascript
gridview生成时如何去掉style属性中的border-collapse
2014/09/30 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
Bootstrap模态框插件使用详解
2017/05/11 Javascript
jQuery实现IE输入框完成placeholder标签功能的方法
2017/09/20 jQuery
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
[03:04]DOTA2英雄基础教程 影魔
2013/12/11 DOTA
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
高中课前三分钟演讲稿
2014/08/18 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
中秋客户感谢信
2015/01/22 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
企业安全生产检查制度
2015/08/06 职场文书