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

by

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

More Related Contents:

  1. Simple Conditional Routing in Reactjs
  2. React Router work on reload, but not when clicking on a link
  3. Programmatically Navigate using react-router
  4. How to push to History in React Router v4?
  5. What is mapDispatchToProps?
  6. What is the best way to access redux store outside a react component?
  7. Programmatically navigating in React-Router v4
  8. Nesting Routes in react-router v4
  9. React Router v4 – How to get current route?
  10. Detect Route Change with react-router
  11. What is the best way to redirect a page using React Router? [closed]
  12. Use Connect or pass data as props to children
  13. Nested Routes not rendering with React Router v4
  14. How does connect work without mapDispatchToProps
  15. React router, pass data when navigating programmatically?
  16. React Router 4 Nested Routes not rendering
  17. React router 4 does not update view on link, but does on refresh
  18. How to nest routes in React Router v4?
  19. how to set initial state in redux
  20. My Redux state has changed, why doesn’t React trigger a re-render?
  21. How do I see state when logging to the console instead of Proxy object inside reducer action?
  22. Attach Authorization header for all axios requests
  23. React Router Pass Param to Component
  24. How to stop /#/ in browser with react-router?
  25. React – Display loading screen while DOM is rendering?
  26. react-router-dom useParams() inside class component
  27. Getting error Cannot read property ‘setState’ of undefined
  28. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  29. React: Parent component re-renders all children, even those that haven’t changed on state change
  30. How can I dispatch function in redux?

Leave a Comment