105

I don't understand what the purpose of using an IndexRoute and IndexLink. It seems that in any case the code below would of selected the Home component first unless the About path was activated.

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="about" component={About}/>
</Route>

vs 

<Route path="/" component={App}>
  <Route path="home" component={Home}/>
  <Route path="about" component={About}/>
</Route>

What's the advantage/purpose here of the first case?

laser
  • 1,378
  • 13
  • 13
Nick Pineda
  • 5,464
  • 11
  • 39
  • 60
  • Why would `Home` be chosen in the first example, unless the path was `/home`? Check out the explanation in the docs: https://github.com/rackt/react-router/blob/master/docs/guides/basics/IndexRoutes.md – Michelle Tilley Sep 22 '15 at 01:20
  • You can imagine that main is a navigation bar and that Home and About are the main page that you can click through on the navigation bar. – Nick Pineda Sep 22 '15 at 01:23
  • 2
    In the top example, going to `/` would render `App` with `Home` passed as a child. In the bottom example, going to `/` would render `App` with *neither* `Home` or `About` being rendered, since neither of their paths match. – Michelle Tilley Sep 22 '15 at 01:24
  • 2
    Ohh!!! Could you put that as an answer so I can give you credit? Thank you! – Nick Pineda Sep 22 '15 at 01:29
  • 3
    In the change from v0.13 to v1.0 they changed the name from `DefaultRoute` to `IndexRoute`. I find that 'default' better describes the purpose. https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md#linking-to-defaultindex-routes – Clarkie Sep 22 '15 at 08:11

1 Answers1

107

In the top example, going to / would render App with Home passed as a child. In the bottom example, going to / would render App with neither Home nor About being rendered, since neither of their paths match.

For older versions of React Router, more information is available on associated version's Index Routes and Index Links page. Starting in version 4.0, React Router no longer uses the IndexRoute abstraction to achieve the same goal.

Michelle Tilley
  • 149,782
  • 38
  • 355
  • 303
  • 3
    So what could we using this feature in practice? – seasonqwe Mar 30 '16 at 02:54
  • 1
    For instance, we can create one parent container, several child routes, and set one of these child routes as default (IndexRoute). Or, if we do not need a default child route, and need to hint the user that he is to choose something (no IndexRoute then) – Olga Gnatenko Jul 26 '16 at 07:39
  • 1
    @AlexHopeO'Connor Thanks, I've updated the second half of the answer – Michelle Tilley Mar 26 '17 at 21:31
  • what passed as a child means exactly? loading on the background? being able to access props? other? – StLia Apr 26 '17 at 13:39