CODEWITHSUNDEEP
reactjsreact-router
Aaron Powell
Aaron Powell

Reputation: 25107

Nested routes in react-router

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.

Upvotes: 30

Views: 27372

Answers (3)

Kevin
Kevin

Reputation: 682

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>

Upvotes: 13

Paweł Janik
Paweł Janik

Reputation: 1

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>
...

Upvotes: 0

bjfletcher
bjfletcher

Reputation: 11518

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>

Upvotes: 43

Related Questions