react-router how to configure the index route using Javascript object?

Question

I've tried the following and it's not working:

const routeConfig = [
            {
                // path: '/',
                component: MyApp,
                indexRoute: {component: Homepage},
                childRoutes: routes
            }
        ];
        React.render(<Router history={history} routes={routeConfig} />, document.getElementById('content'));

The "Homepage" component is ignored entirely!

I'm using react-router 1.0.0 and react 0.13.3

Answer 1

First of all the best thing to do is to upgrade to the 1.0 final (there are no breaking changes - just bug fixes)

See the example below on how to use plain routes with IndexRoute:

import React from 'react'
import { render } from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { Router } from 'react-router'

const Home = () =>
  <h3>Home</h3>

const App = (props) =>
  <div>
    <h1>App</h1>
    <Navigation />
    {props.children}
  </div>

const routes = [
  {
      path: '/',
      component: App,
      indexRoute: {
        component: Home
      }
  }
]

const Root = () =>
  <Router history={createBrowserHistory()} routes={routes} />


render(<Root />, document.getElementById('root'));

Edit: I created an example for you here. When you clone the repo, navigate to plain-routes example and npm install && npm start.