react-router JS 控制路由跳转(转载)
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)
},
})
react-router JS 控制路由跳转(转载)的更多相关文章
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- React-Router JS控制路由跳转
React-Router JS控制路由跳转 时间: 2016-04-12 15:01:20 作者: zhongxia React-Router 控制路由跳转的方式,目前知道的有两种[Link 链接, ...
- react-router v4 使用 history 控制路由跳转
问题 当我们使用react-router v3的时候,我们想跳转路由,我们一般这样处理 我们从react-router导出browserHistory. 我们使用browserHistory.push ...
- js 控制页面跳转的5种方法
js 控制页面跳转的5种方法 编程式导航: 点击跳转路由,称编程式导航,用js编写代码跳转. History是bom中的 History.back是回退一页 Histiory.go(1)前进一页 Hi ...
- JS控制div跳转到指定的位置的几种解决方案总结
原文:http://www.jb51.net/article/96574.htm 这篇文章主要介绍了JS控制div跳转到指定的位置的几种解决方案总结,小编觉得挺不错的,现在分享给大家,也给大家做个参考 ...
- Jsp页面跳转和js控制页面跳转的几种方法
Jsp 页面跳转的几种方法 1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servle ...
- js控制页面跳转,清缓存,强制刷新页面
单看标题,必定满脸蒙13. 其实,想表达的仅仅是,在js中通过window.location.href控制页面跳转时,有时会跳转至缓存页面,并没有真正去请求要跳转的地址,导致页面数据未能及时加载刷新. ...
- nuxt.js同路由跳转参数不同,mounted不执行时
watch: { '$route'(to, from) { if (to.fullPath !== from.fullPath) { this.$nextTick(() => { // 不加th ...
- JS控制div跳转到指定的位置的解决方案总结
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的.即要求滚轮滚动到指定的位置.先看下基本的解决方案. 1.给链接a加个#的方式来实现跳转.(锚点方法)这里直接贴下代码: html页面: & ...
随机推荐
- 死磕nginx系列--配置文档解读
nginx配置文件主要分为四个部分: main(全局设置) http ( ) upstream(负载均衡服务器设置) server(主机设置) location(URL匹配特点位置的设置) serve ...
- QGis C++ 开发之图层分类显示
开发环境:Win10 + VS2010 + Qt 4.8.6 + QGis 2.14.4 简单介绍下如何用C++方式实现QGis中图层分类显示的方法. 要实现图层的分类显示主要会用到QgsCatego ...
- jqgrid 使用自带的行编辑
上篇jqgrid 单击行启用行编辑,切换行保存原编辑行 本篇,说说使用jqgrid自带的行编辑 1)设置需要编辑的列 editable: true colModel: [ { label: '字段编 ...
- centos发送邮件
这里使用mailx发送. #yum -y install mailx 安装成功后,进入家目录编写配置文件.配置发送方的邮箱.密码.发送的服务器 #vi ~/.mailrc set from=hello ...
- Advanced Electronic Engineer
Job Title Advanced Electronic Engineer Job Description In this role, you have the opportunity to Be ...
- MySQL ERROR 1054 的问题
MySQL 1054错误的情况 在用命令插入数据时提示 1054错误的问题: 这种情况下的解决方法: 是因为引号的问题 ‘ ’ . 字符串应该加上引号,解决问题.如下:
- Android Studio com.android.support:percent 导入错误 - 转
看第一行代码(第二版的)书,讲了一个关于PercentFrameLayout和PercentRelativeLayout的部分,书上在build.gradle中导入了com.android.suppo ...
- 20155207 《网络对抗》 Exp9 Web安全基础
20155207 <网络对抗> Exp9 Web安全基础 实验内容 关于WebGoat Cross-Site Scripting(XSS)练习 Injection Flaws练习 CSRF ...
- MiZ702学习笔记10——文本实例化IP的方法
之前,添加vivado自带IP的时候,都是以图形化的方式:一般是新建一个Block Design顶层文件,然后将图形化的ip贴到,Block Design中. 但是,在进行PL的开发过程中,有时不想使 ...
- 几种flash存储芯片的用途和分类
1.IIC EEPROM------容量小,采用的是IIC通信协议:用于在掉电时,存系统配置参数,比如屏幕亮度等.常用芯片型号有 AT24C02.FM24C02.CAT24C02等,其常见的封装多为D ...