React-Router: Quel est le but d'IndexRoute?

102

Je ne comprends pas à quoi servent les IndexRoute et IndexLink . Il semble que dans tous les cas, le code ci-dessous aurait sélectionné le composant Home en premier à moins que le chemin About ait été activé.

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

contre

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

Quel est l'avantage / le but ici du premier cas?

— Nick Pineda
source

Pourquoi serait Homechoisi dans le premier exemple, à moins que le chemin ne l'était /home? Découvrez l'explication dans la documentation: github.com/rackt/react-router/blob/master/docs/guides/basics/…

— Michelle Tilley

Vous pouvez imaginer que main est une barre de navigation et que Accueil et À propos sont la page principale sur laquelle vous pouvez cliquer sur la barre de navigation.

— Nick Pineda

Dans l'exemple du haut, aller à /rendrait Appavec Homepassé en tant qu'enfant. Dans l'exemple du bas, aller à /rendrait Appavec aucun Home ou en Aboutcours de rendu, car aucun de leurs chemins ne correspond.

— Michelle Tilley

Ohh !!! Pourriez-vous me donner une réponse pour que je puisse vous donner du crédit? Je vous remercie!

— Nick Pineda

Dans le changement de v0.13 à v1.0, ils ont changé le nom de DefaultRouteà IndexRoute. Je trouve que «par défaut» décrit mieux l'objectif. github.com/rackt/react-router/blob/master/…

— Clarkie

101

Dans l'exemple du haut, aller à /rendrait Appavec Homepassé en tant qu'enfant. Dans l'exemple du bas, aller à /rendrait Appavec ni Home ni Aboutétant rendu, car aucun de leurs chemins ne correspond.

Pour les anciennes versions de React Router, plus d'informations sont disponibles sur la page Index Routes et Index Links de la version associée . Depuis la version 4.0, React Router n'utilise plus l' IndexRouteabstraction pour atteindre le même objectif.

— Michelle Tilley
source

Alors, que pourrions-nous utiliser cette fonctionnalité dans la pratique?

— seasonqwe

Par exemple, nous pouvons créer un conteneur parent, plusieurs routes enfants et définir l'une de ces routes enfants par défaut (IndexRoute). Ou, si nous n'avons pas besoin d'une route enfant par défaut, et que nous devons indiquer à l'utilisateur qu'il doit choisir quelque chose (pas d'IndexRoute alors)

— Olga Gnatenko

@ AlexHopeO'Connor Merci, j'ai mis à jour la deuxième moitié de la réponse

— Michelle Tilley

qu'est-ce qui est passé enfant signifie exactement? chargement en arrière-plan? pouvoir accéder aux accessoires? autre?

— StLia