详解各版本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的导航使用上变得越来越简单。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 在react中使用vue的状态管理的方法示例

    在react中使用vue的状态管理的方法示例

    这篇文章主要介绍了在react中使用vue的状态管理的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • react-native滑动吸顶效果的实现过程

    react-native滑动吸顶效果的实现过程

    这篇文章主要给大家介绍了关于react-native滑动吸顶效果的实现方法,文中通过示例代码介绍的非常详细,对大家学习或者使用react-native具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-06-06
  • 使用react实现手机号的数据同步显示功能的示例代码

    使用react实现手机号的数据同步显示功能的示例代码

    本篇文章主要介绍了使用react实现手机号的数据同步显示功能的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 详解使用create-react-app添加css modules、sasss和antd

    详解使用create-react-app添加css modules、sasss和antd

    这篇文章主要介绍了详解使用create-react-app添加css modules、sasss和antd,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 浅谈对于react-thunk中间件的简单理解

    浅谈对于react-thunk中间件的简单理解

    这篇文章主要介绍了浅谈对于react-thunk中间件的简单理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • react以create-react-app为基础创建项目

    react以create-react-app为基础创建项目

    这篇文章主要介绍了react以create-react-app为基础创建项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 详解基于webpack搭建react运行环境

    详解基于webpack搭建react运行环境

    本篇文章主要介绍了详解基于webpack搭建react运行环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 浅谈React深度编程之受控组件与非受控组件

    浅谈React深度编程之受控组件与非受控组件

    这篇文章主要介绍了浅谈React深度编程之受控组件与非受控组件,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • react的滑动图片验证码组件的示例代码

    react的滑动图片验证码组件的示例代码

    这篇文章主要介绍了react的滑动图片验证码组件的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • 详解超简单的react服务器渲染(ssr)入坑指南

    详解超简单的react服务器渲染(ssr)入坑指南

    这篇文章主要介绍了详解超简单的react服务器渲染(ssr)入坑指南,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

最新评论