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


Posted in Javascript onJune 15, 2017

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)
 },
})

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

Javascript 相关文章推荐
对象的类型:本地对象(1)
Dec 29 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
Jun 08 Javascript
jQuery中extend()和fn.extend()方法详解
Jun 03 Javascript
JS判断字符串字节数并截取长度的方法
Mar 05 Javascript
vue2.0+webpack环境的构造过程
Nov 08 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
apicloud拉起小程序并传递参数的方法示例
Nov 21 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例
May 14 jQuery
微信分享invalid signature签名错误踩过的坑
Apr 11 Javascript
vue 把二维或多维数组转一维数组
Apr 24 Vue.js
Vue路由跳转问题记录详解
Jun 15 #Javascript
JS奇技之利用scroll来监听resize详解
Jun 15 #Javascript
package.json文件配置详解
Jun 15 #Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 #Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 #Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 #Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 #Javascript
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
2019/05/31 PHP
php加速缓存器opcache,apc,xcache,eAccelerator原理与配置方法实例分析
2020/03/02 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python读写文件方法总结
2015/06/09 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
基于python实现KNN分类算法
2020/04/23 Python
python实现转圈打印矩阵
2019/03/02 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
使用Python实现文字转语音并生成wav文件的例子
2019/08/08 Python
Python从文件中读取指定的行以及在文件指定位置写入
2019/09/06 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Python如何读写CSV文件
2020/08/13 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
美国时尚假发购物网站:Wigsbuy
2019/04/06 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
五一家具促销方案
2014/01/10 职场文书
装修五一活动策划案
2014/01/23 职场文书
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android