I'm working to learn React + ReactRouter to build a multi-step form. I got the example working here:

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?

render: function() {
    switch (this.state.step) {
        case 1:
    return <AccountFields fieldValues={fieldValues}
                          nextStep={this.nextStep}
                          saveValues={this.saveValues} />
        case 2:
    return <SurveyFields  fieldValues={fieldValues}
                          nextStep={this.nextStep}
                          previousStep={this.previousStep}
                          saveValues={this.saveValues} />
        case 3:
    return <Confirmation  fieldValues={fieldValues}
                          previousStep={this.previousStep}
                          submitRegistration={this.submitRegistration} />
        case 4:
    return <Success fieldValues={fieldValues} />
    }
}

I've tried:

  render: function() {
        switch (this.state.step) {
            case 1:
        return <AccountFields fieldValues={fieldValues}
                              nextStep={this.nextStep}
                              saveValues={this.saveValues} />
            case 2:
                       browserHistory.push('/surveyfields')
            case 3:
                      browserHistory.push('/confirmation')
            case 4:
                       browserHistory.push('/success')
        }
    }

UPDATED

..
        case 2:
            <Route path="/surveyfields" ponent={SurveyFields}/>
..

var Wele = React.createClass({
  render() {
    return (
      <Router history={browserHistory}>
        <Route path='/wele' ponent={App}>
          <IndexRoute ponent={Home} />
          <Route path='/stuff' ponent={Stuff} />
          <Route path='/features' ponent={Features} />
          <Route path='/surveyfields' ponent={SurveyFields} />

        </Route>
      </Router>
    );
  }
});

I'm working to learn React + ReactRouter to build a multi-step form. I got the example working here: https://www.viget./articles/building-a-multi-step-registration-form-with-react

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?

render: function() {
    switch (this.state.step) {
        case 1:
    return <AccountFields fieldValues={fieldValues}
                          nextStep={this.nextStep}
                          saveValues={this.saveValues} />
        case 2:
    return <SurveyFields  fieldValues={fieldValues}
                          nextStep={this.nextStep}
                          previousStep={this.previousStep}
                          saveValues={this.saveValues} />
        case 3:
    return <Confirmation  fieldValues={fieldValues}
                          previousStep={this.previousStep}
                          submitRegistration={this.submitRegistration} />
        case 4:
    return <Success fieldValues={fieldValues} />
    }
}

I've tried:

  render: function() {
        switch (this.state.step) {
            case 1:
        return <AccountFields fieldValues={fieldValues}
                              nextStep={this.nextStep}
                              saveValues={this.saveValues} />
            case 2:
                       browserHistory.push('/surveyfields')
            case 3:
                      browserHistory.push('/confirmation')
            case 4:
                       browserHistory.push('/success')
        }
    }

UPDATED

..
        case 2:
            <Route path="/surveyfields" ponent={SurveyFields}/>
..

var Wele = React.createClass({
  render() {
    return (
      <Router history={browserHistory}>
        <Route path='/wele' ponent={App}>
          <IndexRoute ponent={Home} />
          <Route path='/stuff' ponent={Stuff} />
          <Route path='/features' ponent={Features} />
          <Route path='/surveyfields' ponent={SurveyFields} />

        </Route>
      </Router>
    );
  }
});

• javascript
• reactjs
• react-router

1 Answer 1

If you route them like this, transitioning from say, /surveyfields to /success wont affect affect the state of the Survey ponent at all.

<Route path="/surveyfields" ponent={Survey}/>
<Route path="/confirmation" ponent={Survey}/>
<Route path="/success" ponent={Survey}/>

React Router will however update the props and trigger a render. If you want to render different things depending on URL, have this in the render method.

if(this.props.location.pathname==="/surveyfields")
   return (
     <span>
       survey things
       <Button onClick={() => this.props.history.push("/confirmation")}>next page</Button>
   </span>)
if(this.props.location.pathname==="/confirmation")
   return <span>do you want to do this</span>

Clicking the button will navigate to the next page. The location and history props are inserted by React router for Route ponents.