How to push to History in React Router v4?

Question

In the current version of React Router (v3) I can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn't available in v4, and I'm not sure what the appropriate way to handle this is.

In this example, using Redux, components/app-product-form.js calls this.props.addProduct(props) when a user submits the form. When the server returns a success, the user is taken to the Cart page.
// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
          dispatch({ type: types.AUTH_USER });
          localStorage.setItem('token', response.data.token);
          browserHistory.push('/cart');
          // no longer in React Router V4
      });
}

How can I make a redirect to the Cart page from function for React Router v4?

Gufran Mirza · Accepted Answer

Nasty question, took me quite a lot of time, but eventually, I solved it this way: Wrap your container with withRouter and pass history to your action in mapDispatchToPropsfunction. In action use history.push('/url') to navigate. Action: export function saveData(history, data) { fetch.post('/save', data) .then((response) => { ... history.push('/url'); }) }; Container: import { withRouter } from 'react-router-dom'; ... const mapDispatchToProps = (dispatch, ownProps) => { return { save: (data) => dispatch( saveData(ownProps.history, data) )} }; export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Container)); This is valid for React Router v4.x.

Ednsquare · Answer

You can use the history methods outside of your components. Try by the following way. First, create a history object used the history package: // src/history.js import { createBrowserHistory } from 'history'; export default createBrowserHistory(); Then wrap it in (please note, you should use import { Router } instead of import { BrowserRouter as Router }): // src/index.jsx // ... import { Router, Route, Link } from 'react-router-dom'; import history from './history'; ReactDOM.render(

Home
Login

, document.getElementById('root'), ); // Use this wany in any react component hostory.push('route-to-be-pushed')

React JS

Similar Questions

How to Programmatically navigate using react router?

React JS - setState doesn't update the state immediately

Unable to access React instance (this) inside event handler?

On a mission to build Next-Gen Community Platform for Developers

Facebook

Twitter

Linkedin

Instagram