updating router's history location by dispatching redux action (using react-router-dom)

Question

I have a router that looks something like this

<Router>
       <Switch>
             <Route path="abc.do" render={() => <SetupAppInitialLoad pageKey="abc" />} />
              <Route path="xyz.do" render={() => <SetupAppInitialLoad pageKey="xyz" />} />
       </Switch>
</Router>

I have many Route like these inside <Switch>. I am using redux to handle state and dispatching async actions from some components when user clicks on a button/link.

export const asyncExampleAction = () => {
    return (dispatch, getState) => {
        //logic to send inputs to server comes here
        .then(checkStatus)
        .then(parseJSON)
        .then( (data) => {
            if (success case) {
                history.push(`something.do?phase=something`);
            } else {
                //handle error logic
            }
        })
        .catch( (error) => {
            console.log(error);

        });
    }
}

Now, the problem I am facing is, even though history.push updates the url and navigates me to 'something.do?phase=something', but I don't see Route's history.location getting updated. Because of this (I think), when I click on some link on the page 'something.do?phase=something', only url of the page changes, but navigation to that new page doesn't happen.

I checked Programmatically navigate using react router V4 and Programmatically navigate using react router, but still not getting anywhere. Please help.

Answer 1

That happens because react-router does not directly depend on window.history, but instead uses this history project, which wraps window.history and provides react-router with the possibility to listen to location updates and react on them.

You have to options to update navigate from your actions:

1. Use react-router-redux library.
2. Or pass history prop from your Component to your actions and use it to navigate inside of them.

Second option is the one officialy recommended by react-router doc:

Rather than dispatching actions to navigate you can pass the history object provided to route components to your actions and navigate with it there.