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 相关文章推荐
JavaScript解析URL参数示例代码
Aug 12 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
js鼠标点击图片实现随机变换图片的方法
Feb 16 Javascript
jQuery实现购物车计算价格功能的方法
Mar 25 Javascript
快速解决js中window.location.href不工作的问题
Nov 02 Javascript
angularjs2中父子组件的数据传递的实例代码
Jul 05 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
Apr 18 jQuery
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
微信小程序实现日历功能
Nov 27 Javascript
vue-cli构建vue项目的步骤详解
Jan 27 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
JS实现拖动模糊框特效
Aug 25 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 htmlentities和htmlspecialchars 的区别
2008/08/18 PHP
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
JavaScript中的ajax功能的概念和示例详解
2016/10/17 Javascript
微信小程序  action-sheet详解及实例代码
2016/11/09 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
浅述节点的创建及常见功能的实现
2016/12/15 Javascript
BootStrapValidator校验方式
2016/12/19 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
实时监控input框,实现输入框与下拉框联动的实例
2018/01/23 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
一个简单的python程序实例(通讯录)
2013/11/29 Python
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python实现对象转换为xml的方法示例
2017/06/08 Python
python 对dataframe下面的值进行大规模赋值方法
2018/06/09 Python
python 阶乘累加和的实例
2019/02/01 Python
Python面向对象程序设计类的多态用法详解
2019/04/12 Python
使用opencv识别图像红色区域,并输出红色区域中心点坐标
2020/06/02 Python
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
2021/03/17 Javascript
求职简历自荐信范文
2013/10/21 职场文书
历史系毕业生自荐信
2013/10/28 职场文书
商务助理岗位职责
2013/11/13 职场文书
社会学专业学生职业规划书
2014/02/07 职场文书
企业员工培训感言
2014/02/26 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
小王子读书笔记
2015/06/29 职场文书
《称赞》教学反思
2016/02/17 职场文书