Zurück-Taste funktioniert nicht in mehrstufiger Form in React

Question

Ich habe mehrstufige Registrierungsformular in React JS. Meine Hauptkomponente ist wie folgt:

import React, {PropTypes} from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import * as actionCreators from '../../actions/actionCreators'; 
import countries from '../../data/countries'; 

import RegistrationFormStepOne from './registrationFormStepOne'; 
import RegistrationFormStepTwo from './registrationFormStepTwo'; 
import RegistrationFormStepThree from './registrationFormStepThree'; 
import RegistrationFormStepFour from './registrationFormStepFour'; 

class RegistrationPage extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      user: Object.assign({}, this.props.userData), 
      fileNames: {}, 
      selectedFile: {}, 
      icons: { 
       idCard: 'upload', 
       statuten: 'upload', 
       blankLetterhead: 'upload', 
       companyPhoto: 'upload' 
      }, 
      step: 1, 
      errors: {} 
     }; 

     this.setUser = this.setUser.bind(this); 
     this.onButtonClick = this.onButtonClick.bind(this); 
     this.onButtonPreviousClick = this.onButtonPreviousClick.bind(this); 
    } 

    getCountries(){ 
     return countries; 
    } 

    setUser(event) { 
     const field = event.target.name; 
     const value = event.target.value; 

     let user = this.state.user; 
     user[field] = value; 
     this.setState({user: user}); 
    } 

    onButtonClick(name, event) { 
     event.preventDefault(); 
     this.props.actions.userRegistration(this.state.user); 
     switch (name) { 
      case "stepFourConfirmation": 
       this.setState({step: 1}); 
       break; 
      case "stepTwoNext": 
       this.setState({step: 3}); 
       break; 
      case "stepThreeFinish": 
       this.setState({step: 4}); 
       break; 
      default: 
       this.setState({step: 2}); 
     } 
    } 

    onButtonPreviousClick(){ 
     this.setState({step: this.state.step - 1}); 
    } 

    render() { 
     const languageReg = this.props.currentLanguage.default.registrationPage; 

     let formStep = ''; 
     let step = this.state.step; 
     switch (step) { 
      case 1: 
       formStep = (<RegistrationFormStepOne user={this.props.userData} 
                onChange={this.setUser} 
                onButtonClick={this.onButtonClick} 
                countries={this.getCountries(countries)} 
                errors={this.state.errors} 
                step={step}/>); 
       break; 
      case 2: 
       formStep = (<RegistrationFormStepTwo user={this.props.userData} 
                onChange={this.setUser} 
                onButtonClick={this.onButtonClick} 
                onButtonPreviousClick={this.onButtonPreviousClick} 
                errors={this.state.errors}/>); 
       break; 
      case 3: 
       formStep = (<RegistrationFormStepThree user={this.props.userData} 
                 onFileChange={this.onFileChange} 
                 onButtonClick={this.onButtonClick} 
                 onButtonPreviousClick={this.onButtonPreviousClick} 
                 errors={this.state.errors} 
                 fileNames={this.state.fileNames} 
                 icons={this.state.icons} 
                 fileChosen={this.state.selectedFile}/>); 
       break; 

      default: 
       formStep = (<RegistrationFormStepFour user={this.props.userData} 
                 onChange={this.setUser} 
                 onChangeCheckboxState={this.changeCheckboxState} 
                 onButtonClick={this.onButtonClick} 
                 onButtonPreviousClick={this.onButtonPreviousClick} 
                 errors={this.state.errors}/>); 
     } 

     return (
      <div className="sidebar-menu-container" id="sidebar-menu-container"> 

       <div className="sidebar-menu-push"> 

        <div className="sidebar-menu-overlay"></div> 

        <div className="sidebar-menu-inner"> 
         <div className="contact-form"> 
          <div className="container"> 
           <div className="row"> 
            <div className="col-md-10 col-md-offset-1 col-md-offset-right-1"> 
             {React.cloneElement(formStep, {currentLanguage: languageReg})} 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

RegistrationPage.contextTypes = { 
    router: PropTypes.object 
}; 

function mapStateToProps(state, ownProps) { 
    return { 
     userData: state.userRegistrationReducer 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(actionCreators, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(RegistrationPage); 

Wenn ich klicken Sie auf Weiter auf die Zustands Schritt ändert und das nächste Formular Schritt renderen wird. Wenn ich auf vorherige klicke, wird der Schritt dekrementiert und ich sehe den vorherigen Schritt. Es funktioniert gut mit diesen Tasten.

Aber Browser-Schaltfläche zurück funktioniert nicht. Wenn ich zum Beispiel einen dritten Schritt mache und auf den Zurück-Button in meinem Browser klicke, werde ich auf die Homepage weitergeleitet.

Meine routes.js Datei ist wie folgt:

import React from 'react'; 
import {IndexRoute, Route} from 'react-router'; 

import App from './components/App'; 
import HomePage from './components/HomePage'; 
import Registration from './components/registration/RegistrationPage'; 
import RegistrationStepOne from './components/registration/registrationFormStepOne'; 
import RegistrationStepTwo from './components/registration/registrationFormStepTwo'; 
import RegistrationStepThree from './components/registration/registrationFormStepThree'; 
import RegistrationStepFour from './components/registration/registrationFormStepFour'; 
import UserPage from './components/user/userHome'; 
import requireAuth from './common/highOrderComponents/requireAuth'; 
import hideIfLoggedIn from './common/highOrderComponents/hideIfLoggedIn'; 

import PasswordReset from './common/passwordReset'; 

const routes = (
    <Route path="/" component={App}> 
     <IndexRoute component={HomePage}/> 
     <Route path="registration" component={hideIfLoggedIn(Registration)} /> 
     <Route path="reset-password" component={PasswordReset} /> 
     <Route path="portal" component={requireAuth(UserPage)} /> 
    </Route> 
); 

export default routes; 

ich wahrscheinlich diese Komponenten innerhalb <Route path="registration" ... hinzufügen sollte, und ich versuchte es, aber ohne Erfolg.

Irgendwelche Ratschläge, wie man Browser-Schaltfläche zurück zum Arbeiten und um mich zurück zum vorherigen Schritt zu machen?

EDIT

Mu routes.js Datei ist nun wie folgt:

const routes = (
<Route path="/" component={App}> 
    <IndexRoute component={HomePage}/> 
    <Route path="registration/:id" component={hideIfLoggedIn(Registration)}/> 
    <Route path="reset-password" component={PasswordReset} /> 
    <Route path="portal" component={requireAuth(UserPage)} /> 
</Route> 
); 

Und in meiner Hauptkomponente habe ich geändert OnButtonClick Funktion (wo die Schritt-Schritte) zu:

onButtonClick(name, event) { 
    event.preventDefault(); 

    switch (name) { 
     case "stepFourConfirmation": 
      if(this.validation("four")) { 
       this.props.actions.userRegistrationThunk(this.state.user); 
       this.setState({step: 5, user: {}}); 
      } 
      break; 
     case "stepTwoNext": 
      if(this.validation("two")) { 
       this.setState({step: 3}); 
       this.context.router.push("stepThree"); 
      } 
      break; 
     case "stepThreeFinish": 
      this.setState({step: 4}); 
      break; 
     default: 
      if(this.validation("one")) { 
       this.setState({step: 2}); 
       this.context.router.push('stepTwo'); 
      } 
    } 
} 

Und ich habe hinzugefügt

componentWillMount(){ 
    console.log(this.props.params.id); 
} 

Wo würde ich den Schritt dekrementieren, wenn auf die Zurück-Schaltfläche des Browsers geklickt wird.

Wenn die Hauptkomponente zum ersten Mal geladen wird, bekomme ich in der Konsole stepone, und das ist gut. Aber wenn ich auf den nächsten Knopf klicke, um zum zweiten Schritt zu gehen. Die URL wird in Registrierung/Schritt Zwei geändert, aber in der Konsole bekomme ich Warnung: [Reagieren-Router] Position "StepTwo" stimmte nicht mit Routen und ich sehe nicht, was ist meine this.props.params.id.

Irgendwelche Ratschläge?

Answer 1

Dies ist, weil Sie die Schritte in Ihrer Komponente anstatt Routen verwalten .Sie die Route Seite für die Registrierung ändern

const routes = (
    <Route path="/" component={App}> 
     <IndexRoute component={HomePage}/> 
     <Route path="registration/:id" component={hideIfLoggedIn(Registration)} > 
</Route 
     <Route path="reset-password" component={PasswordReset} /> 
     <Route path="portal" component={requireAuth(UserPage)} /> 
    </Route> 
); 

Auch clickin haben incrementStep die Route/registration/1 und id innen verfügbar wäre zu ändern die Komponente als this.props.params.id