详解各版本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-router v4如何使用history控制路由跳转详解
  • react-router JS 控制路由跳转实例
赞 (0)

相关推荐

  • react-router v4如何使用history控制路由跳转详解

    前言 距离React Router v4 正式发布也已经挺久了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好"尝尝鲜"... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(｡ꏿ﹏ꏿ)ﾉﾞ咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事实上 3.x 版本相比于 2.x 并没有引入任何新的特性,只是将 2.x 版本中部分废弃 API 的

  • react-router JS 控制路由跳转实例

    Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <

  • 详解各版本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的方法,使组件

  • 详解Webpack+Babel+React开发环境的搭建的方法步骤

    详解Webpack+Babel+React开发环境的搭建的方法步骤

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等)作为模块进行编译后进行打包. 2.安装Webpack 要开始使用Webpack在项目中进行开发前我们首先需要在全局环境中进行安装. npm install webpack -g 3.创建一个项目 安装好后创建一个名叫learn-webpack的项目并进入该项目文件夹,当然项目名字你可以起你自己想要的

  • CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)

    CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)

    一.安装前的准备工作 1.yum update #更新系统 2.yum install gcc gcc-c++ autoconf automake cmake bison m4 libxml2 libxml2-devel libcurl-devel libjpeg-devel libpng-devel libicu-devel #安装php.MySQL.Nngix所依赖的包 3.下载以下包 #我把所有源文件都下载在root目录,读者可自行修改源文件存放目录 3.1 libmcrypt-2.5.8

  • 详解Ref在React中的交叉用法

    目录 一.首先说明下什么是Ref 二.ref在hooks中的用法 1.ref在hooks中HTMLDom的用法 2.ref在hooks中与函数式组件的用法 3.ref在hooks中与类组件一同使用 4.ref在hooks中与class.react-redux一同使用 一.首先说明下什么是Ref Ref 转发是一项将 ref 自动地通过组件传递到其一子组件的技巧.对于大多数应用中的组件来说,这通常不是必需的.但其对某些组件,尤其是可重用的组件库是很有用的 Ref官网说明:点击这里 二.ref在ho

  • 详解如何配置CLion作为Qt5开发环境的方法

    详解如何配置CLion作为Qt5开发环境的方法

    使用Qt进行程序开发时QtCreator总是不二之选.作为老牌IDE在提供了强大的功能同时也对Qt的支持做了许多优化.如果没有特别的原因你应该使用它. 然而一个顺手的工具将会极大得提升生产效率,而如果你之前使用别的工具进行开发,那么就要斟酌一下学习使用QtCreator的成本了. 所以我将介绍配置CLion(另一个强大的c++ IDE)作为Qt5的开发环境,在利用现有工具链的同时避免了安装另一个大型软件. 准备工作 CLion的安装和激活超出了本文的讨论范围,我们假设你已经安装好了CLion.如

  • 详解Spring Cloud Zuul网关修改为短连接方法

    详解Spring Cloud Zuul网关修改为短连接方法

    目录 一.问题分析 二.解决方式 一.问题分析 之前在用zuul网关的时候,请求几次然后连接就断开了.原因是因为http1.1之后,默认走的都是connection=keep-alive 长连接.但没有心跳维持,顾1分钟断开一次.但RestFul一般都是走短连接就行了.因此想着只要修改头部connection属性就行了. 就是在过滤器中修改Zuul的RequestContext ctx对象 //设置请求为短连接 ctx.addZuulRequestHeader("connection"

  • 详解Pycharm出现out of memory的终极解决方法

    最近在跑程序,然后Pycharm就跳出out of memory 的错误提示,可能是由于读取的数据太多导致的,Pycharm有一个默认内存的最大容量上线,跳出提示的是1024M,也就是分配给Pycharm的内内存不够啦! 一.说明: pycharm64.exe.vmoptions 配置文件的内容 -Xms128m -Xmx1024m -XX:ReservedCodeCacheSize=240m -XX:+UseConcMarkSweepGC -XX:SoftRefLRUPolicyMSPerMB

  • 详解VSCode打开多个项目文件夹的解决方法

    最近从sublime转vscode,自然而然就会把sublime的一些习惯带过来,其中有一点让人头疼的是: 当把一个文件夹拖进vscode里面的时候,会把原来的文件夹覆盖掉,这就意味着不能同时在vscode中打开多个文件夹,用过sublime的同学都知道直接把文件夹拖进去就可以了,如下图: 那么怎么解决不能同时在vscode中打开多个文件夹的问题呢? 相信大部分人都会百度答案的,那么在别人的答案里,都可以说是不怎么完美.先来看下别人的方法: 第一种:新建VSCode窗口 第二种:用一个文件夹 可

  • 详解Selenium-webdriver绕开反爬虫机制的4种方法

    之前爬美团外卖后台的时候出现的问题,各种方式拖动验证码都无法成功,包括直接控制拉动,模拟人工轨迹的随机拖动都失败了,最后发现只要用chrome driver打开页面,哪怕手动登录也不可以,猜测driver肯定是直接被识别出来了.一开始尝试了改user agent等方式,仍然不行,由于其他项目就搁置了.今天爬淘宝生意参谋又出现这个问题,经百度才知道原来chrome driver的变量有一个特征码,网站可以直接根据特征码判断,经百度发现有4种方法可以解决,记录一下自己做的尝试. 1.mitproxy

  • 详解查看JAVA API及JAVA源码的方法

    详解查看JAVA API及JAVA源码的方法

    在java的日常学习中,我们有时候会需要看java的api说明,或者是查看java的源码,使我们更好的了解java,接下来我就来说说如何查看java的api以及java源码 对于java的api,一般是在下面的网址中进行查看 https://docs.oracle.com/javase/8/docs/api/ 而对于java的源码,我们现在来演示查看nextLine()的源码: 将鼠标放置在希望转跳到源码的函数上,等待系统浮现这个黄色的框 然后点击下面的Open Declaration,即可进入

随机推荐