Nested Routes about metal-plugins

[jbalsas]

Copied from deprecate/metal-router#14 (comment) by @mthadley

I always thought react-router had a nice API for this:

// Router Configuration
<Route path="/" component={App}>
    <Route path="about" component={About}/>
    <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
    </Route>
    <Route path="*" component={NoMatch}/>
</Route>

// Resulting Component Trees...

// Route: /
<App/>

// Route: /about
<App>
    <About />
</App>

// Route: /user/23
<App>
    <Users>
        <User userId={23} />
    </Users>
</App>

// Route: /somerandomurl
<App>
    <NoMatch />
</App>

I'm not sure, but I think this layout can still be achieved with the current API. However I think there would be more boilerplate involved.

[jbalsas]

Copied from deprecate/metal-router#14 (comment) (comment) by @bawachhe

That would be pretty useful for us in terms of code cleanliness as well, as we currently have something like this.

<Router component={CreateMain} path={`${PortletConstants.urls.basePath}/main/create`} />
<Router component={CreateMain} path={`${PortletConstants.urls.basePath}/main/create/:model([a-zA-Z]+)`} />
<Router component={EditMain} path={`${PortletConstants.urls.basePath}/main/:portletMainId(\\d+)`} />
<Router component={EditMain} path={`${PortletConstants.urls.basePath}/main/:portletMainId(\\d+)/:action([a-zA-Z]+)`} />
<Router component={EditMain} path={`${PortletConstants.urls.basePath}/main/:portletMainId(\\d+)/edit/:model([a-zA-Z]+)`} />
<Router component={EditMain} path={`${PortletConstants.urls.basePath}/main/:portletMainId(\\d+)/edit/:model([a-zA-Z]+)/:action([a-zA-Z]+)`} />
<Router component={EditMain} path={`${PortletConstants.urls.basePath}/main/:portletMainId(\\d+)/edit/:model([a-zA-Z]+)/:entryId(\\d+)`} />
<Router component={EditMain} path={`${PortletConstants.urls.basePath}/main/:portletMainId(\\d+)/edit/:model([a-zA-Z]+)/:entryId(\\d+)/:action([a-zA-Z]+)`} />
<Router component={Index} path={this._defaultRoute} />