Summarize an example tutorial on react-router JS controlling routing jumps

This article mainly introduces the react-router JS control routing jump example. React can directly use react-router to implement routing. Those who are interested can learn about the

Link component, which is used for normal user clicks to jump, but sometimes operations such as form jumps and clicks on the buttonjump are also required. How to connect these situations with React Router?
The following is a form.

<form onSubmit={this.handleSubmit}>
 <input type="text" placeholder="userName"/>
 <input type="text" placeholder="repo"/>
 <button type="submit">Go</button>
</form>

The first method is to use 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)
 },

The second method is to use contextobject.

export default React.createClass({

 // ask for `router` from context
 contextTypes: {
  router: React.PropTypes.object
 },

 handleSubmit(event) {
  // ...
  this.context.router.push(path)
 },
})

The above is the detailed content of Summarize an example tutorial on react-router JS controlling routing jumps. For more information, please follow other related articles on the PHP Chinese website!