React-Router: Jaki jest cel IndexRoute?

102

Nie rozumiem, jaki jest cel używania IndexRoute i IndexLink . Wygląda na to, że w każdym przypadku poniższy kod wybrałby najpierw komponent Home, chyba że została aktywowana ścieżka About.

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

Jaka jest zaleta / cel pierwszego przypadku?

Nick Pineda
źródło
Dlaczego miałby Homezostać wybrany w pierwszym przykładzie, jeśli ścieżka nie była /home? Sprawdź wyjaśnienie w dokumentacji: github.com/rackt/react-router/blob/master/docs/guides/basics/…
Michelle Tilley
Możesz sobie wyobrazić, że main to pasek nawigacyjny, a Strona główna i Informacje to strony główne, które możesz kliknąć na pasku nawigacyjnym.
Nick Pineda,
2
W górnym przykładzie going /to renderowałoby się Appz Homeprzekazanym jako dziecko. W dolnym przykładzie polecenie going /to renderowałoby się Appbez żadnego Home lub Aboutrenderowanego, ponieważ żadna z ich ścieżek nie jest zgodna.
Michelle Tilley,
2
Ohh !!! Czy mógłbyś podać to jako odpowiedź, abym mógł przyznać ci kredyt? Dziękuję Ci!
Nick Pineda,
3
Przy zmianie z v0.13 na v1.0 zmienili nazwę z DefaultRoutena IndexRoute. Uważam, że określenie „domyślne” lepiej opisuje cel. github.com/rackt/react-router/blob/master/…
Clarkie

Odpowiedzi:

101

W górnym przykładzie going /to renderowałoby się Appz Homeprzekazanym jako dziecko. W dolnej przykład zamiar /uczyniłoby Appz ani Home też nie Aboutsą renderowane, ponieważ żaden z ich ścieżkami pasuje.

W przypadku starszych wersji React Router więcej informacji można znaleźć na stronie Index Routes and Index Links dla danej wersji . Począwszy od wersji 4.0, React Router nie używa już IndexRouteabstrakcji do osiągnięcia tego samego celu.

Michelle Tilley
źródło
3
Więc co moglibyśmy wykorzystać w praktyce?
Seasonqwe
1
Na przykład możemy utworzyć jeden kontener nadrzędny, kilka tras podrzędnych i ustawić jedną z tych tras jako domyślną (IndexRoute). Lub, jeśli nie potrzebujemy domyślnej trasy podrzędnej i musimy podpowiedzieć użytkownikowi, że ma coś wybrać (wtedy nie ma IndexRoute)
Olga Gnatenko
1
@ AlexHopeO'Connor Dzięki, zaktualizowałem drugą połowę odpowiedzi
Michelle Tilley
co uchodzi za dziecko dokładnie oznacza? ładowanie w tle? mając dostęp do rekwizytów? inny?
StLia