当前位置:首页 > 日记 > 正文

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

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

Link组件用于正常的用户点击跳转,但是有时还需要表单跳转、点击按钮跳转等操作。这些情况怎么跟React Router对接呢?
下面是一个表单。

<form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <button type="submit">Go</button></form>

第一种方法是使用browserHistory.push

import { browserHistory } from 'react-router'// ... handleSubmit(event) {  event.preventDefault()  const userName = event.target.elements[0].value  const repo = event.target.elements[1].value  const path = `/repos/${userName}/${repo}`  browserHistory.push(path) },

第二种方法是使用context对象。

export default React.createClass({ // ask for `router` from context contextTypes: {  router: React.PropTypes.object }, handleSubmit(event) {  // ...  this.context.router.push(path) },})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

excel倒数函数的使用教程excel倒数

excel倒数函数的使用教程excel倒数

函数,使用教程,倒数,电脑软件,excel,  在Excel中,很多情况下需要进行倒数、正数的排列,这时需要用到RANK这一函数进行排序,下面是小编整理的excel倒数函数的使用教程以供大家阅读。希望对你有帮助!excel倒数函数的使用教程示例1:正排名excel倒…

利用javascript实现的三种放大镜效

利用javascript实现的三种放大镜效

三种,源码,实例,效果,电脑软件,本文实现的是一款简单的放大镜效果,有三种不同的样式,支持移动端;大家可以直接下载源码进行学习参考,下面来一起学习学习吧。实现效果如下效果一效果二效果三调用代码如下//前面是ID或者Class,后面有init里面参数…

JS实现的模仿QQ头像资料卡显示与隐

JS实现的模仿QQ头像资料卡显示与隐

显示,头像,效果,资料卡,电脑软件,本文实例讲述了JS实现的模仿QQ头像资料卡显示与隐藏效果。分享给大家供大家参考,具体如下:我们使用QQ时经常需要查看朋友的资料卡,当我们把鼠标移入头像时,资料卡显示,并且鼠标能在头像与资料卡之间能随意移动,当…

jquery精度计算代码 jquery指定精

jquery精度计算代码 jquery指定精

精度,计算,小数位,精确,代码,本文实例为大家分享了jquery指定精确小数位的具体代码,供大家参考,具体内容如下/*** 将标签的值格式化* id 标签id* min 最小值* max 最大值*/function toFloat(id,min,max){ var htmlVal = $("#"+id).html(); …

怎么找出来被隐藏了的QQ查找被隐藏

怎么找出来被隐藏了的QQ查找被隐藏

方法,查找,电脑软件,QQ,strong,  有时候明明登录了QQ,但是却找不到QQ图标在哪里,这是因为被隐藏的原因。那么怎么把QQ找出来呢?下面小编告诉你查找被隐藏的QQ方法,希望对你有所帮助!找出来被隐藏了的QQ的方法首先要登录自己的QQ账号然后查看…

如何巧用Excel公式计算个人所得税

如何巧用Excel公式计算个人所得税

计算,个人所得税,巧用,公式,电脑软件,  个人所得税的计算看起来比较复杂,似乎不用VBA宏编程而只用公式来计算是一件不可能的事。其实,Excel提供的函数公式不但可以计算个人所得税,而且还有很大的灵活。以下是小编为您带来的关于巧用Excel公…

WPS演示怎么设置自动切换幻灯片WPS

WPS演示怎么设置自动切换幻灯片WPS

方法,设置,幻灯片,演示,设置自动,  WPS演示课件是应用最广泛的多媒体教学资源,它能够有效的将文字、图形、音频、视频、动画等多种元素融合在一起;很多情况下都是点击鼠标才会切换到下一张幻灯片,这样很不好,有些场合需要自动切换,那么如何…

jQuery Chosen通用初始化

jQuery Chosen通用初始化

初始化,通用,电脑软件,jQuery,Chosen,一直在用Chosen这个js插件,其目的就是美化下拉框。github地址:https://harvesthq.github.io/chosen/no_results_text:"xxxxx"无搜索结果时显示的文本allow_single_deselect:true 是否允许取消选择disable…

jquery中$.fn和滚动效果实现的必备

jquery中$.fn和滚动效果实现的必备

知识,滚动效果,电脑软件,jquery,fn,前言图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery、IIFE、setInterval等基础以及$.fn用法:jquery中$.fn用法$.fn是jquery的命名空间,如果对jq…

怎样在WPS表格中制作下拉列表

怎样在WPS表格中制作下拉列表

下拉列表,表格,电脑软件,WPS,  通过数据有效性来制作下拉列表,这样就可以不用手动输入。只需要用鼠标点击就可以选择你需要的内容输入到单元格里了哦,很方便的操作。以下是小编为您带来的关于WPS表格中制作下拉列表,希望对您有所帮助。WPS表…

微信小程序 setData的使用方法详解

微信小程序 setData的使用方法详解

使用方法,详解,程序,电脑软件,微信小,微信小程序 setData的使用方法详解最近在使用微信小程序的setData时,遇到了以下问题。如下:官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的:Page({ data: { array: [{text: 'init …

js中new一个对象的过程

js中new一个对象的过程

一个对象,过程,电脑软件,js,使用new关键字调用函数(new ClassA(…))的具体步骤:1. 创建空对象{}2. 使用新对象,调用函数,函数中的this被指向新实例对象: {}.构造函数(); 3. 设置新对象的constructor属性为构造函数的名称,设置新…