react-router JS 控制路由跳转(转载)

Posted 改变

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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写项目-利用react-router解决跳转路由等问题

今日艰难笔记-原生js整合react-router路由管理

试着用React写项目-利用react-router解决跳转路由等问题

React中的路由react-router

React-Router路由跳转时render触发两次的情况。

react-router 4 切换路由跳转到页面顶部