React Router Navigation in multi step form

Question

I have a react multi step form with a flux store like this:

// MultiForm.js
....
import LoadFile from './components/LoadFile';
import LoadPeople from './components/LoadPeople';
import Confirmation from './components/Confirmation';

class MultiForm extends Component {
.
.
.

    nextPage() {
      // Update page number with a flux action
      MultiStepActions.nextPage();
    }

    previousPage() {
      // Update page number with a flux action
      MultiStepActions.previousPage();
    }

    render() {
       const {pagina} = this.state;
       <div className="container">
         {page === 1 && <LoadFile
           handleChange={this.handleChange}
           file={this.state.file}
           nextPage={this.nextPage}
           data1={this.state.data1}
           data2={this.state.data2}
           data3={this.state.data3}/>
         }
         {page === 2 && <LoadPeople
           listPeople={this.state.listPeople}
           nextPage={this.nextPage}
           previousPage={this.previousPage}
           handleChangePeople={this.handleChangePeople}/>
         }
         {page === 3 && <Confirmation
           listData={this.state.listData}
           nextPage={this.nextPage}
           previousPage={this.previousPage}/>
         }
       </div>
    }
}


// Index.js with react-router
import Menu from './components/Menu';
class Index extends Component {
    class App extends Component {
      render() {
        return (
          <div>
            <Menu />
            {this.props.children}
          </div>
        )
      }
    }

    render((
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <Route path="/MultiForm" component={MultiForm}>
          </Route>
        </Route>
      </Router>
    ), document.getElementById('app'));
}

It is a summary of the main component (MultiForm) and a basic react router scenario. In the component I am using a flux store to set and get the actual number of page of the multi step form and then render the component according to the actual page.

In the components (LoadFile, LoadPeople, Confirmation) I have a button to navigate to the next and previos page (via nextPage and previousPage functions) and all wokr ok.

Now I want achieve the same result using the back and previous buttons of the browser and I suppose with react-router. So, how I must configure react router or what I need to do in order to getting the browser buttons to work equals to my next and previous buttons?

Rauch

Answer 1

You cannot override a browser's navigation buttons. You can however, hook up the pages states defined in react-router, and as the user browses around using the navigation buttons, your application state remains synced to the browser state.

What i would suggest for you here is to create a parameter for your MultiForm route:

<Route path="/Multiform/:page" component={MultiForm} />

This would then allow you to get that page parameter in this.props.params.page

Even better, you can hook up each of the child components as routes in themselves:

<Route path="/Multiform/" component={MultiForm}>
  <Route path="1" component={LoadFile} />
  <Route path="2" component={LoadPeople} />
  <Route path="3" component={Confirmation} />
</Route>

class Multiform extends Component {
    //...
    render() {
        return (
            <div className="container">
                { this.props.children }
            </div>
        )
    }
}

Mailbag

Thank you @Clark Pan for your response. I have two more questions, first: How to update the browser history? I mean who is the responsible to call to the browserHistory.push(), because I have the current page in a flux store. Second, in the second example in your answer you are using {this.props.children} but how I can pass the state props that I am using in each component? – Rauch

I figured out and and instead of use {this.prosp.children} I used ` {React.cloneElement( this.props.children, { ...this.state}) } ` then I the children component Previous and Next button I put the browserHistory.push('); to navigate to my next or previous component trhough react router. – Rauch