Nested Routes

[jbalsas]

Copied from deprecate/metal-router#14 by @AngeloYoun

It is a common use case where a site structure needs to have nested routing.

Currently, only the top level URL routes can be routed via metal-router. It would be useful to be able to do something along the lines of:

<Router component={SomeComponent} path={some/path/:param1} />

...

class SomeComponent extends JSXComponent {
    render() {
        return {
            <div class="wrapper">
                <HeaderComponent />

                <Router component={FooComponent} path={some/path/:param1/view1} />

                <Router component={BarComponent} path={some/path/:param1/view2} />
            </div>
        }
    }
}

[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} />