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得到XML某节点的子节点个数的脚本
Oct 11 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
Jun 06 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
完善的jquery处理机制
Feb 21 Javascript
微信小程序 MINA文件结构
Oct 17 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
Oct 19 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
Vue中qs插件的使用详解
Feb 07 Javascript
JavaScript代码实现简单计算器
Dec 27 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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
python定时器使用示例分享
2014/02/16 Python
零基础学Python(一)Python环境安装
2014/08/20 Python
Python生成验证码实例
2014/08/21 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
用Python编写web API的教程
2015/04/30 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python编程实现的简单Web服务器示例
2017/06/22 Python
用Python实现KNN分类算法
2017/12/22 Python
详解如何管理多个Python版本和虚拟环境
2019/05/10 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
python如何绘制疫情图
2020/09/16 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
html5中如何将图片的绝对路径转换成文件对象
2018/01/11 HTML / CSS
机械制造专业毕业生求职信
2014/03/02 职场文书
求职意向书
2014/04/01 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
2020年基层司法所建设情况调研报告
2019/11/30 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS