Wie man ein reaktives mehrstufiges Formular mit React Router arbeiten lässt

Question

Ich arbeite daran, React + ReactRouter zu lernen, um ein mehrstufiges Formular zu erstellen. Ich habe das Beispiel hier funktioniert: https://www.viget.com/articles/building-a-multi-step-registration-form-with-react

Das Problem ist dieses Beispiel verwendet nicht ReactRouter, also die URL ändert sich nie während des Formulars. Der Autor erwähnt "Sie könnten jeden Schritt auf eine benutzerdefinierte Route einstellen", aber ich konnte nicht herausfinden, wie das funktioniert. Wie können Sie den aktuellen Renderprozess aktualisieren, um mit ReactRouter zu arbeiten? Alle Hinweise geschätzt. Dank

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} /> 
    } 
} 

Ich habe versucht:

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') 
     } 
    } 

AKTUALISIERT

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

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

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

Answer 1

Wenn Sie Route sie so, den Übergang von etwa /surveyfields-/success pflegt den Zustand beeinflussen beeinflussen die Survey Komponente überhaupt.

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

React Router wird jedoch die Requisiten aktualisieren und ein Rendern auslösen. Wenn Sie verschiedene Dinge abhängig von URL rendern möchten, haben Sie dies in der render Methode.

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> 

Klicken Sie auf die Schaltfläche, um zur nächsten Seite zu gelangen. Die location und history Requisiten werden von React Router für Routenkomponenten eingefügt.