title: redirect using react router
body: <p>I am using <code>ReactJS</code> and have a form (component) that needs to redirect to another component, if the post request is successful. I have just started using react router, so this is the way I am trying to redirect.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Redirect, Link } from 'react-router-dom';
  import NextComponent from '/NextComponent';
  import axios from 'axios';
  
  class CurrentComponent extends Component {
  
  constructor() {
      super();
      this.state = {
          value: ''
          redirect: false
      };
  }
  
  handleSubmit() {
      axios.post('xxx/yyy', {
          xxx: yyy
      })
      .then(function() {
          console.log('Success');
          this.setState({redirect: true});
      })
      .catch(function() {
          console.log('Error');
      });
  }
  
  render() {
      return(
          &lt;div&gt;
           &lt;form&gt;
            &lt;div className="form-group"&gt;
             &lt;input type="name" placeholder="name" /&gt;
            &lt;/div&gt;
            &lt;div className="form-group"&gt;
            &lt;button type="button" onClick={this.handleSubmit.bind(this)} &gt;Submit&lt;/button&gt;
            {this.state.redirect &amp;&amp;
             &lt;Redirect to={{
              pathname: '/nextcomponent',
              state: {from: this.state.value}
              }} /&gt;
            }
         &lt;/div&gt;
           &lt;Router&gt;
             &lt;Route path="/nextcomponent" component={NextComponent} /&gt;
           &lt;/Router&gt;
          &lt;/form&gt;
         &lt;/div&gt;
      );
   }
  }
  
  export default PresentComponent;
  </code></pre>
  
  <p>It is not redirecting and I have been trying to figure this out. I am sure there are better solutions available, but due to my lack of knowledge I am unsure of implementing it. Any help is appreciated. Thank you.</p>