React-Router: ¿Cuál es el propósito de IndexRoute?

102

No entiendo cuál es el propósito de usar IndexRoute e IndexLink . Parece que, en cualquier caso, el código a continuación seleccionaría primero el componente Inicio a menos que se activara la ruta Acerca de.

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

¿Cuál es la ventaja / propósito aquí del primer caso?

Nick Pineda
fuente
¿Por qué se Homeelegiría en el primer ejemplo, a menos que fuera el camino /home? Consulte la explicación en los documentos: github.com/rackt/react-router/blob/master/docs/guides/basics/…
Michelle Tilley
Puede imaginar que la principal es una barra de navegación y que Inicio y Acerca de son la página principal en la que puede hacer clic en la barra de navegación.
Nick Pineda
2
En el ejemplo superior, going to /representaría Appcon Homepass como un niño. En el ejemplo inferior, ir a /se renderizaría Appcon ninguno de los dos Home o Aboutse renderizaría, ya que ninguno de sus caminos coincide.
Michelle Tilley
2
Ohh !!! ¿Podría poner eso como una respuesta para que pueda darle crédito? ¡Gracias!
Nick Pineda
3
En el cambio de v0.13 a v1.0 cambiaron el nombre de DefaultRoutea IndexRoute. Encuentro que 'predeterminado' describe mejor el propósito. github.com/rackt/react-router/blob/master/…
Clarkie

Respuestas:

101

En el ejemplo superior, going to /representaría Appcon Homepass como un niño. En el ejemplo abajo, yendo a /haría Appcon ninguno Home , ni Aboutque se queden, ya que ninguno de sus caminos coinciden.

Para versiones anteriores de React Router, hay más información disponible en la página Index Routes y Index Links de la versión asociada . A partir de la versión 4.0, React Router ya no usa la IndexRouteabstracción para lograr el mismo objetivo.

Michelle Tilley
fuente
3
Entonces, ¿qué podríamos usar esta función en la práctica?
seasonqwe
1
Por ejemplo, podemos crear un contenedor principal, varias rutas secundarias y establecer una de estas rutas secundarias como predeterminada (IndexRoute). O, si no necesitamos una ruta secundaria predeterminada, y necesitamos insinuar al usuario que debe elegir algo (no IndexRoute entonces)
Olga Gnatenko
1
@ AlexHopeO'Connor Gracias, he actualizado la segunda mitad de la respuesta
Michelle Tilley
¿Qué significa exactamente lo que pasó de niño? cargando en segundo plano? poder acceder a los accesorios? ¿otro?
StLia