脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react router 跳转

react-router JS 控制路由跳转实例

 更新时间：2017年06月15日 11:43:47   作者：沈斯明  
这篇文章主要介绍了react-router JS 控制路由跳转实例，react实现路由可以直接使用react-router。有兴趣的可以了解一下

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实现createElement 和 cloneElement的区别

    React实现createElement 和 cloneElement的区别

    本文详细介绍了React中React.createElement和React.cloneElement两种方法的定义、用法、区别及适用场景,具有一定的参考价值,感兴趣的可以了解一下
    2024-09-09
  • React入门教程之Hello World以及环境搭建详解

    React入门教程之Hello World以及环境搭建详解

    Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。下面这篇文章主要给大家介绍了关于React入门教程之Hello World以及环境搭建的相关资料，需要的朋友可以参考借鉴。
    2017-07-07
  • React中memo useCallback useMemo方法作用及使用场景

    React中memo useCallback useMemo方法作用及使用场景

    这篇文章主要为大家介绍了React中三个hooks方法memo useCallback useMemo的作用及使用场景示例，有需要的朋友可以借鉴参考下，希望能够有所帮助
    2023-03-03
  • React优雅的封装SvgIcon组件示例

    React优雅的封装SvgIcon组件示例

    这篇文章主要为大家介绍了React优雅的封装SvgIcon组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • React-Native TextInput组件详解及实例代码

    React-Native TextInput组件详解及实例代码

    这篇文章主要介绍了React-Native TextInput组件详解及实例代码的相关资料,需要的朋友可以参考下
    2016-10-10
  • react中的forwardRef 和memo的区别解析

    react中的forwardRef 和memo的区别解析

    forwardRef和memo是React中用于性能优化和组件复用的两个高阶函数,本文给大家介绍react中的forwardRef 和memo的区别及适用场景,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • react fiber执行原理示例解析

    react fiber执行原理示例解析

    这篇文章主要为大家介绍了react fiber执行原理示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • React状态管理Redux的使用介绍详解

    React状态管理Redux的使用介绍详解

    redux是redux官方react绑定库，能够使react组件从redux store中读取数据，并且向store分发actions以此来更新数据，这篇文章主要介绍了react-redux的设置,需要的朋友可以参考下
    2022-09-09
  • react-redux集中式状态管理及基本使用与优化

    react-redux集中式状态管理及基本使用与优化

    react-redux把组件分为两类，一类叫做UI组件，一类叫做容器组件，这篇文章主要介绍了集中式状态管理＜react-redux＞基本使用与优化,需要的朋友可以参考下
    2022-08-08
  • 关于React项目中的PDF展示解决方案

    关于React项目中的PDF展示解决方案

    这篇文章主要介绍了关于React项目中的PDF展示解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07

最新评论