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> 

Answer 2

Here's an update to @bjfletcher's answer for react-router 1.0.0. As noted in the upgrade guide:

RouteHandler is gone. Router now automatically populates this.props.children of your components based on the active route.

So instead of

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

you would use:

<div><h1>Dashboard</h1>{this.props.children}</div>