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实现的页面关键字密度查询代码
Dec 27 Javascript
网站页面自动跳转实现方法PHP、JSP(上)
Aug 01 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
js单向链表的具体实现实例
Jun 21 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
JQuery中上下文选择器实现方法
May 18 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
Jul 28 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
PHP的加密方式及原理
2012/06/14 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
jQuery验证插件validate使用方法详解
2020/09/13 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
单行 JS 实现移动端金钱格式的输入规则
2017/05/22 Javascript
JQuery 获取多个select标签option的text内容(实例)
2017/09/07 jQuery
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
node中间层实现文件上传功能
2018/06/11 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
Python使用剪切板的方法
2017/06/06 Python
python 获取字符串MD5值方法
2018/05/29 Python
使用python 打开文件并做匹配处理的实例
2019/01/02 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
python设置环境变量的作用和实例
2019/07/09 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
2014端午节活动策划方案
2014/01/27 职场文书
《骑牛比赛》教后反思
2014/04/22 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
九年级数学教学反思
2016/02/17 职场文书
2019个人年度目标制定攻略!
2019/07/12 职场文书
德劲DE1108畅想
2021/04/22 无线电