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 r

Answer 1

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>

Answer 2

I had similar problem. I think that following snippet could work for you:

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

  <DefaultRoute handler={availableRoutes.Dashboard}/>
</Route>
...

Answer 3

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>