详解各版本React路由的跳转的方法
更新时间：2018年05月10日 16:53:27 作者：床上不败
这篇文章主要介绍了详解各版本React路由的跳转的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
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的导航使用上变得越来越简单。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
heatmap.js 是一个用于生成热力图的 JavaScript 库,React 是一个流行的 JavaScript 库,用于构建用户界面,本小编给大家介绍了在React 应用程序中使用heatmap.js实现热力图的绘制的示例,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2023-12-12
这篇文章主要给大家介绍了关于React进阶之组件的解耦之道，文中通过详细的示例代码给大家介绍了组件分割与解耦的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-08-08
这篇文章主要介绍了react redux的原理以及基础使用讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
本篇文章主要介绍了ReactJS实现表单的单选多选和反选的示例，非常具有实用价值，需要的朋友可以参考下2017-10-10
这篇文章主要介绍了React之虚拟DOM的实现原理分析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了基于Webpack4和React hooks搭建项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
详解Jotai Immer如何实现undo redo功能示例详解
这篇文章主要为大家介绍了详解Jotai Immer如何实现undo redo功能示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要weidajai 介绍了React 高阶组件与Render Props优缺点详解,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了react 应用多入口配置及实践总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
React Hook - 自定义Hook的基本使用和案例讲解
自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性，这篇文章主要介绍了React类组件和函数组件对比-Hooks的介绍及初体验,需要的朋友可以参考下2022-11-11
最新评论