How do I set a default child route with react-router?

I’m using React-Router 1.0.0-rc3, but I’m having trouble understanding how I can set a default route for a child route.

I have a rootRoute setup as follows:

var rootRoute = {
    component: 'div',
    childRoutes: [{
        path: '/',
        component: require('./components/Console'),
        childRoutes: [
            require('./routes/FileManager'),
            require('./routes/UserManager')
        ]
    }]
};

React.render(<Router routes={rootRoute}/>, document.body);

My Console root component is setup as follows:

module.exports = React.createClass({

    render: function () {
        return (
            <div className="console">
                <ConsoleHeader/>
                {this.props.children}
            </div>
        );
    }

});

My FileManager route definition is as follows:

module.exports = {
    path: 'files',

    getComponent: function (location, callback) {
        callback(null, require('./components/FileManager'));
    }
};

My objective is for the Console component to always be loaded while any of its child routes are active. It will contain a child component based on the child route. I want the child components to be loaded asynchronously. I want the FileManager child route to also be default if no child route has been selected.

So the following two routes would both select the FileManager component:

/
/files

I understand one way of doing this would be to do something like this:

{this.props.children || require('./routes/FileManager/components/FileManager')}

This doesn’t feel right, however. I don’t want to take that path to the FileManager component out of my route definition file.

Perhaps I could create a default child route entry like:

{
    path: '/', //Or maybe empty string here since it concatenates to the parent?
    getComponent: function (location, callback) {
        callback(null, require('./components/FileManager'));
    }
}

But this essentially the same route definition I already have except with a different path.

So it would seem there must be a cleaner way of specifying the default child route, but I can’t figure it out even after browsing the API documentation.

How can I make the FileManager child route the default child route?

I’d strongly recommend using JSX for your routes. It will make things much more easy to follow.

Below is an example.

var ConsoleApp = require('./components/Console');
var FileManager = require('./routes/FileManager');
var UserManager = require('./routes/UserManager');
var RootDefault = require(./routes/SomeComponent);

var rootRoute = (
  <Route path="/" component={ConsoleApp}>
    <IndexRoute component={RootDefault}/>
    <Route path="file-manager" component={FileManager}/>
    <Route path="user-manager" component={UserManager}/>
  </Route>
)