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('./ponents/App.jsx');

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

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('./ponents/App.jsx');

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

• javascript
• reactjs
• react-router

• Could it be the spaces around the equals sign? – Koen. Commented Mar 15, 2017 at 22:43
• 1 try import { APP } from './ponents/App.jsx'); or <Route path="/" ponent={App}/> – Nicholas Commented Mar 16, 2017 at 0:06
• Which version of RR are you using? – Tyler McGinnis Commented Mar 16, 2017 at 1:41
• I'm using version 4.0.0, which I believe is the latest? – Ben Melito Commented Mar 16, 2017 at 18:27

1 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('./ponents/App.jsx');

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