React router browser back button isn't working

Question

I'm trying to create a multi step form using React JS and react-router.

The form step is changed with state. If I click on the button next the state step is incremented and the next step is shown.

But this way if I'm on for example third step and I click on the back in the browser I'm redirected to the home page instead of a previous step.

My main component is something like this :

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

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

On every button click I push the parameter to the url and change the step. When I click next it's working perfect. In componentWillMount I'm trying to get the parameter from the url and I would than decrement the step depending on the parameter.

But only when the first step is loaded I se stepOne in the console. If I click on next I get [react-router] Location "stepTwo" did not match any routes

My routes.js file is as follows :

    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 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/:id" component={hideIfLoggedIn(Registration)}/>
        <Route path="reset-password" component={PasswordReset} />
        <Route path="portal" component={requireAuth(UserPage)} />
    </Route>
);

export default routes;

Any advice how to solve it?

Answer 1

Try pushing an absolute path. Instead of

this.context.router.push("stepTwo");

try

this.context.router.push("/registration/stepTwo");

Additionally you have a problem with your lifecycle methods. componentWillMount is only called once. When you push the next route, the component is not mounted again, so you don't see the log with the next param. Use componentWillMount for the initial log, componentWillReceiveProps for the next ones:

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

componentWillReceiveProps(nextProps) {
  console.log(nextProps.params.id);
}

Btw: here is a discussion on github. The creators state, that react router is not supporting relative paths