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

Question

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?

Answer 1

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