ReactJS - Cannot read property 'location' of undefined at new Router

Question

So I have a pretty basic setup for my index.js file, where all my routes are held. I'm getting the above TypeError from the console, but I'm unsure as to why. Below is my code:

const React = require('react');
const ReactDOM = require('react-dom');

// React router goodies
import { Router, Route, browserHistory, IndexRoute, hashHistory } from 'react-router';

const App = require('./components/App.jsx');

ReactDOM.render(
  <Router history = {browserHistory}> 
    <Route path="/" component={App}>
    </Route>
  </Router>,
  document.getElementById('app')
);

Answer 1

browserHistory is no more supported from react-router version 4, here is the issue raised - Can no longer import { IndexRoute, browserHistory } from version 4.

Either switch to version 3.0.0 or use BrowserRouter to fix the same.

For version 3.0.0 :

"dependencies": {
    "react": "^15.4.1",
    "react-dom": "^15.4.1",
    "react-router": "^3.0.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
}

For version 4.0.0:

const React = require('react');
const ReactDOM = require('react-dom');
import { BrowserRouter, Route } from 'react-router-dom';

const App = require('./components/App.jsx');

ReactDOM.render(
  <BrowserRouter> 
    <Route path="/" component={App}>
    </Route>
  </BrowserRouter>,
  document.getElementById('app')
);