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

Share Improve this question Follow edited Mar 28, 2017 at 18:18 Arpit Aggarwal 29.3k1616 gold badges9696 silver badges110110 bronze badges asked Mar 15, 2017 at 22:39 Ben MelitoBen Melito 14122 silver badges1313 bronze badges 4

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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')
);