React-router: Nested IndexRoute not working

[pmatev]

I have this route setup, where I need nested IndexRoutes

<Route path="/admin" component={App}>
    <IndexRoute component={HomeBody}>
       <IndexRoute component={Overview}/>
    </IndexRoute>
    // more routes...
</Route>

But the inner IndexRoute doesn't ever seem to resolve.

[ryanflorence]

That doesn't make sense, index routes are leaf nodes, can't be nested.

[raveclassic]

@ryanflorence Sorry about writing to the closed issue.
You're saying that nesting IndexRoutes does not make sense, but why not?
What if I need complex default structure _without_ any redirects just at my root ('/' path)?
As long as new api provides component attributes to every route why do you not allow to nest default route component via children?

Like this: (Here App and Authorized components just render their children)

<Route path="/" component={App}>
    <IndexRoute component={Authorized}>
        <IndexRoute component={Feed}/>
    </IndexRoute>
    <Route path="login" component={Login}/>
</Route>

Another way to accomplish the desired behavior would be using just Route components without path specified and inheriting it from parent but that is not working.
Like this:

<Route path="/" component={App}>
    <Route component={Authorized}>
        <Route component={Feed}/>
    </Route>
    <Route path="login" component={Login}/>
</Route>

But actually this is just the same as using IndexRoute.

[taion]

<Route path="/" component={App}>
    <Route component={Authorized}>
        <IndexRoute component={Feed} />
    </Route>
    <Route path="login" component={Login}/>
</Route>

Does that make sense? We can follow up on Reactiflux or Stack Overflow - the issue tracker is not great for this sort of Q&A thing.

[ghempton]

This seems like a valid issue. @taion's solution does not solve the problem.

[taion]

Elaborate?

[ghempton]

Maybe I am just confusing myself, but the discrepancies between the following cases are not intuitive:

This works:

<Route component={App}>
    <Route path="/ component={Authorized}>
        <IndexRoute component={Feed} />
        ...
    </Route>
    <Route path="/" component={LoginLayout}>
        <Route path="login" component={Login} />
        ...
    </Route>
</Route>

This _does not_ work:

<Route path="/" component={App}>
    <Route path="/" component={Authorized}>
        <IndexRoute component={Feed} />
        ...
    </Route>
    <Route path="/" component={LoginLayout}>
        <Route path="login" component={Login} />
        ...
    </Route>
</Route>

This also _does not_ work, but I think semantically captures what I am trying to do and should be supported:

<Route path="/" component={App}>
    <IndexRoute component={Authorized}>
        <IndexRoute component={Feed} />
        ...
    </Route>
    <Route path="/" component={LoginLayout}>
        <Route path="login" component={Login} />
        ...
    </Route>
</Route>

[taion]

Should be

<Route path="/" component={App}>
    <Route component={Authorized}>
        <IndexRoute component={Feed} />
        ...
    </Route>
    <Route component={LoginLayout}>
        <Route path="login" component={Login} />
        ...
    </Route>
</Route>

[timdorr]

Your second example doesn't work because it's trying to express // as a path to navigate to. Each path, even if duplicated, becomes a node in the route tree, separated by slashes (or being a slash itself if there is nothing else in the path).

You're really close. Here's what you need:

<Route path="/" component={App}>
    <Route component={Authorized}>
        <IndexRoute component={Feed} />
    </Route>
    <Route component={LoginLayout}>
        <Route path="login" component={Login} />
        <Route path="forgot_password" component={ForgotPassword} />
    </Route>
</Route>

Edit: What @taion said.

[ghempton]

ah makes sense, thanks guys.

[nikdo]

I believe I have found a case where nested routes for IndexRoute actually make sense. Please correct me if I am wrong.

[ryanflorence]

I just commented over there.

[nikdo]

@taion @ryanflorence Thank you both for clarification.

[benwiley4000]

@timdorr I appreciate (and I'm using) the solution you gave. However it seems somewhat non-intuitive to me that a Route could fall through to an IndexRoute that is not an immediate child. It seems odd that the grandparent would be able to figure that one of its path-less children has an IndexRoute, so it should go ahead and fall through. Am I missing something conceptually about React Router?

[taion]

It lets you handle cases like https://github.com/reactjs/react-router/issues/3326#issuecomment-210712055 cleanly.

[benwiley4000]

@taion aha, interesting discussion. Thanks for sharing.

[taion]

Yeah, so it's nothing conceptual and at some level it's a bit sloppy, but in practice it's really convenient for certain kinds of route definitions.