详解各版本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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤
Apr 23 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
Javascript基础教程之break和continue语句
Jan 18 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
详解React Native顶|底部导航使用小技巧
Sep 14 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
Mar 19 Javascript
VueJS实现用户管理系统
May 29 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环境配置 php5 mysql5 apache2 phpmyadmin安装与配置
2006/11/17 PHP
PHP与SQL注入攻击[一]
2007/04/17 PHP
php中session_unset与session_destroy的区别分析
2011/06/16 PHP
php如何实现只替换一次或N次
2015/10/29 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
json 入门基础教程 推荐
2009/10/31 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
2011/11/14 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
js鼠标点击图片切换效果实现代码
2015/11/19 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
2016/11/24 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
nodejs中art-template模板语法的引入及冲突解决方案
2017/11/07 NodeJs
解决select2在bootstrap modal中不能正常使用的问题
2018/08/09 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
python3编写C/S网络程序实例教程
2014/08/25 Python
Django验证码的生成与使用示例
2017/05/20 Python
Python模拟自动存取款机的查询、存取款、修改密码等操作
2018/09/02 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python实现bilibili时间长度查询的示例代码
2020/01/14 Python
python程序文件扩展名知识点详解
2020/02/27 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
出纳的岗位职责
2013/11/09 职场文书
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
九年级体育教学反思
2014/01/23 职场文书
文体活动实施方案
2014/03/27 职场文书
挂牌仪式策划方案
2014/05/18 职场文书
校外活动方案
2014/08/28 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015年财务经理工作总结
2015/05/13 职场文书