reactjsreact-routerreduxredux-framework

React router redirect after action redux


I'm using react-redux and react-router. I need to redirect after an action is dispatched.

For example: I have registration a few steps. And after action:

function registerStep1Success(object) {
    return {
        type: REGISTER_STEP1_SUCCESS,
        status: object.status
   };
}

I want to redirect to page with registrationStep2. How can I do this?

p.s. In history browser '/registrationStep2' has not been visited. This page appears only after successful result registrationStep1 page.


Solution

  • With React Router 2+, wherever you dispatch the action, you can call browserHistory.push() (or hashHistory.push() if that’s what you use):

    import { browserHistory } from 'react-router'
    
    // ...
    this.props.dispatch(registerStep1Success())
    browserHistory.push('/registrationStep2')
    

    You can do this from async action creators too if that is what you use.