Source:  Twitter logo

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.

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>
42 users liked answer #0dislike answer #042
bjfletcher profile pic
bjfletcher

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>

13 users liked answer #1dislike answer #113
Kevin profile pic
Kevin

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>
...
0 users liked answer #2dislike answer #20
Paweł Janik profile pic
Paweł Janik

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).