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 JSON操作入门实例
Apr 16 Javascript
js里的prototype使用示例
Nov 19 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
基于JavaScript实现定时跳转到指定页面
Jan 01 Javascript
AngularJS表达式讲解及示例代码
Aug 16 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
微信小程序扫描二维码获取信息实例详解
May 07 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
Vue 修改网站图标的方法
Dec 31 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 iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
php防攻击代码升级版
2010/12/29 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
thinkphp分页集成实例
2017/07/24 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JavaScript 创建对象
2009/07/17 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
js禁止表单重复提交
2017/08/29 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
python访问系统环境变量的方法
2015/04/29 Python
Python中利用原始套接字进行网络编程的示例
2015/05/04 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python中的闭包函数
2018/02/09 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python实现求特征选择的信息增益
2018/12/18 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
django框架单表操作之增删改实例分析
2019/12/16 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python如何获取文件指定行的内容
2020/05/27 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
2013年保送生自荐信格式
2013/11/20 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
践行党的群众路线心得体会
2014/11/05 职场文书
学生党员检讨书范文
2014/12/27 职场文书
在python中实现导入一个需要传参的模块
2021/05/12 Python