React-Router: Qual é a finalidade do IndexRoute?

102

Não entendo qual é o propósito de usar um IndexRoute e IndexLink . Parece que, em qualquer caso, o código abaixo teria selecionado o componente Home primeiro, a menos que o caminho About fosse ativado.

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

Qual é a vantagem / propósito aqui do primeiro caso?

Nick Pineda
fonte
Por que Homeseria escolhido no primeiro exemplo, a menos que o caminho fosse /home? Confira a explicação nos documentos: github.com/rackt/react-router/blob/master/docs/guides/basics/…
Michelle Tilley
Você pode imaginar que main é uma barra de navegação e que Home e About são a página principal na qual você pode clicar na barra de navegação.
Nick Pineda,
2
No exemplo superior, ir para /renderizaria Appcom Homepassado como filho. No exemplo de fundo, indo para /tornaria Appcom nenhum Home ou Aboutsendo processado, uma vez que nenhum de seus caminhos corresponder.
Michelle Tilley,
2
Ohh !!! Você poderia colocar isso como uma resposta para que eu possa lhe dar crédito? Obrigado!
Nick Pineda,
3
Na mudança de v0.13 para v1.0, eles mudaram o nome de DefaultRoutepara IndexRoute. Acho que 'padrão' descreve melhor o propósito. github.com/rackt/react-router/blob/master/…
Clarkie

Respostas:

101

No exemplo superior, ir para /renderizaria Appcom Homepassado como filho. No exemplo de fundo, indo para /tornaria Appcom nenhum Home nem Aboutestá sendo processado, uma vez que nenhum de seus caminhos corresponder.

Para versões anteriores do React Router, mais informações estão disponíveis na página de Rotas de Índice e Links de Índice da versão associada . A partir da versão 4.0, o React Router não usa mais a IndexRouteabstração para atingir o mesmo objetivo.

Michelle Tilley
fonte
3
Então, o que poderíamos usar esse recurso na prática?
seasonqwe
1
Por exemplo, podemos criar um contêiner pai, várias rotas secundárias e definir uma dessas rotas secundárias como padrão (IndexRoute). Ou, se não precisarmos de uma rota secundária padrão e precisarmos sugerir ao usuário que ele deve escolher algo (então sem IndexRoute)
Olga Gnatenko
1
@AlexHopeO'Connor Obrigado, atualizei a segunda metade da resposta
Michelle Tilley
o que passou por criança significa exatamente? carregando em segundo plano? ser capaz de acessar adereços? de outros?
StLia