CODEWITHSUNDEEP
javascriptreactjsreact-router
niba
niba

Reputation: 2911

Nested Routes in DefaultRouter component

I'm playing with my web app and react-router package and I would like to do some nested routes. Here is what I've done

<Route name="app" path="/" handler={App}>
    <DefaultRoute handler={AppPage}>
        <DefaultRoute name="home" handler={HomePage}/>
        <Route name="rooms"  handler={RoomsPage}/>
    </DefaultRoute>
    <Route name="login" handler={LoginPage}/>
    <Route name="firstime" handler={FirstTimePage}/>
</Route>

This example doesn't work because of DefaultRoute. When I changed it to normal Route component everything is ok. I cant find example where DefaultRoute has some childrens. Does DefaultRoute can have nested Routes? If yes then what I'm doing wrong?

Upvotes: 1

Views: 137

Answers (1)

Nicolas
Nicolas

Reputation: 894

I faced the same problem and I ended up using instead of .

I had a quick look at DefaultRoute component and it seems that doesn't support children routes, here's the code:

/**
 * A <DefaultRoute> component is a special kind of <Route> that
 * renders when its parent matches but none of its siblings do.
 * Only one such route may be used at any given level in the
 * route hierarchy.
 */
var DefaultRoute = React.createClass({

  displayName: 'DefaultRoute',

  mixins: [ Configuration ],

  propTypes: {
    name: PropTypes.string,
    path: PropTypes.falsy,
    children: PropTypes.falsy,
    handler: PropTypes.func.isRequired
  }

});

module.exports = DefaultRoute;

I'm not 100% sure but 'children: PropTypes.falsy,' probably means that DefaultRoute doesn't support nested routes.

Hope this helps.

Upvotes: 1

Related Questions