Uncaught ReferenceError: IndexRoute is not defined - How do I resolve this error to use IndexRoute in react-router?

Question

I have a simple set of routes using react-router:

ReactDOM.render(
  <Router history={appHistory}>
    <Route path="/" component={MainLayout}>
      <IndexRoute component={Index} />
    </Route>
  </Router>,

  document.getElementById('app')
);

However, the page load fails and I get the following error in the browser console:

Uncaught ReferenceError: IndexRoute is not defined

How do I fix this?

Answer 1

IndexRoute isn't implicitly loaded from react-router. You need to import it in the same way you do Router and Route:

import { Router, Route, IndexRoute } from 'react-router';

Answer 2

import {IndexRoute} from 'react-router' does not apply to react-route-4. react-router-4 has changed in that it no longer has children. However, with the Route component you can render anything that matches the path.