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 相关文章推荐
用js小类库获取浏览器的高度和宽度信息
Jan 15 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
May 18 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
AngularJS实现单独作用域内的数据操作
Sep 05 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
Jan 04 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
CryptoJS中AES实现前后端通用加解密技术
Dec 18 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
使用Vant完成通知栏Notify的提示操作
Nov 11 Javascript
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 curl请求信息和返回信息设置代码实例
2015/04/27 PHP
递归实现php数组转xml的代码分享
2015/05/14 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
JavaScript 常见对象类创建代码与优缺点分析
2009/12/07 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
jQuery 重复加载错误以及修复方法
2014/12/16 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
fullpage.js全屏滚动插件使用实例
2016/09/06 Javascript
微信小程序 页面跳转如何实现传值
2017/04/05 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
2017/09/26 Javascript
axios拦截设置和错误处理方法
2018/03/05 Javascript
layui的table中显示图片方法
2018/08/17 Javascript
vue 检测用户上传图片宽高的方法
2020/02/06 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python中每次处理一个字符的5种方法
2015/05/21 Python
简单解析Django框架中的表单验证
2015/07/17 Python
使用Python简单的实现树莓派的WEB控制
2016/02/18 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
Python 多线程共享变量的实现示例
2020/04/17 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
用python实现名片管理系统
2020/06/18 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
求职推荐信
2013/10/28 职场文书
婚前协议书怎么写
2014/04/15 职场文书
单位工作证明范文
2014/09/14 职场文书
应届毕业生求职信范文
2015/03/19 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
详解Python中下划线的5种含义
2021/07/15 Python