React alternative to transitionTo react-router-dom 4.1.1 transition in function

Question

I was playing with the react-router-dom alpha and 'transitionTo' was an available method for route change. This seems removed from 4.1.1 just curious what the best method for this would be. Im trying to capture what is entered in the input and use it as part of the dynamic route. The relevant code from inside my component is below.

goToRoute(event) {
          event.preventDefault();
          this.context.router.transitionTo(`route/${this.storeInput.value}`)
        }

  render() {
    return (
      <form onSubmit={(e) => this.goToRoute(e)}>
        <h2>Please Enter Name</h2>
        <input type="text" required placeholder="Enter Name" ref={(input) => {this.storeInput = input } } />
        <button type="submit">Lets Go</button>
      </form>
   )
 }

ComponentName.contextTypes = {
  router: React.PropTypes.object
}

See this answer, I think this is what you are looking for https://stackoverflow.com/questions/44127739/programatically-routing-based-on-a-condition-with-react-router/44128108#44128108 — Shubham Khatri, Jul 08 '17 at 15:28

score 2 · Accepted Answer · answered Jul 10 '17 at 02:42

From what @Shubham posted, thanks!

goToRoute(event) {
          event.preventDefault();
          this.props.history.push(`route/${this.storeInput.value}`)
        }

  render() {
    return (
      <form onSubmit={(e) => this.goToRoute(e)}>
        <h2>Please Enter Name</h2>
        <input type="text" required placeholder="Enter Name" ref={(input) => {this.storeInput = input } } />
        <button type="submit">Lets Go</button>
      </form>
   )
 }

ComponentName.contextTypes = {
  router: React.PropTypes.object
}

React alternative to transitionTo react-router-dom 4.1.1 transition in function

1 Answers1