Pushing to History in React Router v4

Mike Dodge
1 min readMar 18, 2021

In the current version of React Router (v3), you can accept a server response and use browserHistory.push to go to the appropriate response page. However, this isn't available in v4 and you have to go about it a different way.

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.jsimport { createBrowserHistory } from 'history';export default createBrowserHistory();

Then wrap it in <Router> (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';
<Provider store={store}>
<Router history={history}>
<li><Link to="/">Home</Link></li>
<li><Link to="/login">Login</Link></li>
<Route exact path="/" component={HomePage} />
<Route path="/login" component={LoginPage} />

Change your current location from any place, for example:

// src/actions/userActionCreators.js// ...
import history from '../history';
export function login(credentials) {
return function (dispatch) {
return loginRemotely(credentials)
.then((response) => {
// ...

Note: You can also see a slightly different example in React Router FAQ.



Mike Dodge

As Principal Design Technologist in Alexa Voice Shopping at Amazon, I design and build prototypes that define the future of voice and multi-model shopping.