Use history.push in action creator with react-router-v4?

Question

The only working method that I found to work this out without using react-router-redux to route from action creator async action completion is by passing the history prop from the component to action creator and doing:

history.push('routename');

Since BrowserRouter ignores the history prop passed to it thus we cannot use custom history objects with browserhistory.

What is the best possible way to work this out?

Answer 1

Instead of using BrowserRouter you could use the Router with custom history like

import { Router } from 'react-router'  import createBrowserHistory from 'history/createBrowserHistory'  export const history = createBrowserHistory()  <Router history={history}>   <App/> </Router> 

in which case your history.push() will work. With BrowserRouter history.push doesn't work because Creating a new browserHistory won't work because <BrowserRouter> creates its own history instance, and listens for changes on that. So a different instance will change the url but not update the <BrowserRouter>.

Once you create a custom history, you can export it and then import it in your action creator and use it to navigate dynamically like

import { history } from '/path/to/index';  const someAction = () => {     return dispatch => {         ApiCall().then((res) => {             dispatch({type: 'SOME_CALL', payload: res })             history.push('/home');         })     } }