react-router v4 - browserHistory is undefined

Useful pointers above. The simplest solution I've found is to add:

import {createBrowserHistory} from 'history';

to your list of import statements, then add:

const browserHistory = createBrowserHistory();

Might not work perfectly, but for the basic stuff I'm working on seems to do the trick. Hope that helps.

You have to import it from the history module now which provides 3 different methods to create different histories.

• createBrowserHistory is for use in modern web browsers that support the history API
• createMemoryHistory is used as a reference implementation and may also be used in non-DOM environments, like React Native or tests
• createHashHistory for legacy web browsers

You cannot use the browser history in an electron environment, use the hash or the memory one.

import { createHashHistory } from 'history'

const history = createHashHistory()

You can then use the history injected in the props

this.props.history.push('/')

Its is not working for your because in your component you are still using browserHistory which is not longer availabe from react-router package. You should change to using history from the history package

To simplify you can create a history.js file with the following contents

import { createBrowserHistory } from 'history'

export default createBrowserHistory();

Root

import history from '/path/to/history';

ReactDOM.render(
  <Router history={history}>
      <App />
  </Router>,
  document.getElementById('root')
);

Page

import history from 'path/to/history';
...
history.push('/city');