reactjs - Nested routes in react-router

Question

I'm setting up some nested routes within React-Router (v0.11.6 is what I'm working against) but whenever I try and access one of the nested routes it triggers the parent route.

My routes look like this:

<Route handler={App}>
    <Route name="home" path="/" handler={availableRoutes.Splash} />
    <DefaultRoute handler={availableRoutes.Splash} />

    <Route name="dashboard" handler={availableRoutes.Dashboard}>
        <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
   </Route>

    <NotFoundRoute handler={NotFound} />
</Route>

If I collapse the routes up so it looks like:

<Route handler={App}>
    <Route name="home" path="/" handler={availableRoutes.Splash} />
    <DefaultRoute handler={availableRoutes.Splash} />

    <Route name="dashboard" handler={availableRoutes.Dashboard} />
    <Route name="dashboard-child" path="/dashboard/dashboard-child" handler={availableRoutes.DashboardChild} />

    <NotFoundRoute handler={NotFound} />
</Route>

It works fine. The reason I was nesting was because I will have multiple children under the "dashboard" and wanted them all prefixed with dashboard in the URL.

Answer 1

The configuration isn't about the routing (despite the name) but more about the layouts driven by paths.

So, with this configuration:

<Route name="dashboard" handler={availableRoutes.Dashboard}>
  <Route name="dashboard-child" handler={availableRoutes.DashboardChild} />
</Route>

It is saying that dashboard-child is to be embedded inside dashboard. How this works is that if dashboard has something like this:

<div><h1>Dashboard</h1><RouteHandler /></div>

and dashboard-child has:

<h2>I'm a child of dashboard.</h2>

Then for the path dashboard there is no embedded child due to no matching path, resulting in this:

<div><h1>Dashboard</h1></div>

And for the path dashboard/dashboard-child the embedded child has a matching path, resulting in this:

<div><h1>Dashboard</h1><h2>I'm a child of dashboard.</h2></div>