title: How to make a React multi-step form work with React Router?
body: <p>I'm working to learn React + ReactRouter to build a multi-step form. I got the example working here: <a href="https://www.viget.com/articles/building-a-multi-step-registration-form-with-react" rel="nofollow noreferrer">https://www.viget.com/articles/building-a-multi-step-registration-form-with-react</a></p>
  
  <p>The problem is this example doesn't use ReactRouter so the URL never changes during the form. The author mentions "You could set each step to a custom route" however, I haven't been able to figure out how to get that to work. How can you update the current render process to work with ReactRouter?</p>
  
  <pre><code>render: function() {
      switch (this.state.step) {
          case 1:
      return &lt;AccountFields fieldValues={fieldValues}
                            nextStep={this.nextStep}
                            saveValues={this.saveValues} /&gt;
          case 2:
      return &lt;SurveyFields  fieldValues={fieldValues}
                            nextStep={this.nextStep}
                            previousStep={this.previousStep}
                            saveValues={this.saveValues} /&gt;
          case 3:
      return &lt;Confirmation  fieldValues={fieldValues}
                            previousStep={this.previousStep}
                            submitRegistration={this.submitRegistration} /&gt;
          case 4:
      return &lt;Success fieldValues={fieldValues} /&gt;
      }
  }
  </code></pre>
  
  <p>I've tried:</p>
  
  <pre><code>  render: function() {
          switch (this.state.step) {
              case 1:
          return &lt;AccountFields fieldValues={fieldValues}
                                nextStep={this.nextStep}
                                saveValues={this.saveValues} /&gt;
              case 2:
                         browserHistory.push('/surveyfields')
              case 3:
                        browserHistory.push('/confirmation')
              case 4:
                         browserHistory.push('/success')
          }
      }
  </code></pre>
  
  <p><strong>UPDATED</strong></p>
  
  <pre><code>..
          case 2:
              &lt;Route path="/surveyfields" component={SurveyFields}/&gt;
  ..
  
  var Welcome = React.createClass({
    render() {
      return (
        &lt;Router history={browserHistory}&gt;
          &lt;Route path='/welcome' component={App}&gt;
            &lt;IndexRoute component={Home} /&gt;
            &lt;Route path='/stuff' component={Stuff} /&gt;
            &lt;Route path='/features' component={Features} /&gt;
            &lt;Route path='/surveyfields' component={SurveyFields} /&gt;
  
          &lt;/Route&gt;
        &lt;/Router&gt;
      );
    }
  });
  </code></pre>