详解各版本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的15款幻灯片插件
Apr 10 Javascript
js 分页全选或反选标识实现代码
Aug 09 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
类似于QQ的右滑删除效果的实现方法
Oct 16 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
微信小程序实现图片上传功能
May 28 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
ant design charts 获取后端接口数据展示
May 25 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
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
JavaScript几种形式的树结构菜单
2010/05/10 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
webpack4 SCSS提取和懒加载的示例
2018/09/03 Javascript
node.js中module模块的功能理解与用法实例分析
2020/02/14 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python检测远程udp端口是否打开的方法
2015/03/14 Python
详解Python字符串对象的实现
2015/12/24 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
python3 pygame实现接小球游戏
2019/05/14 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
Python如何批量获取文件夹的大小并保存
2020/03/31 Python
Python 实现自动登录+点击+滑动验证功能
2020/06/10 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
一款超酷的js+css3实现的3D标签云特效兼容ie7/8/9
2013/11/18 HTML / CSS
美国沃尔玛网上超市:Walmart
2020/08/14 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
继电保护工岗位职责
2014/01/05 职场文书
单位消防安全责任书
2014/07/23 职场文书
2014年银行信贷员工作总结
2014/12/08 职场文书
老乡会致辞
2015/07/28 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书