web-dev-qa-db-ja.com

React-Router：IndexRouteの目的は何ですか？

IndexRouteおよびIndexLinkを使用する目的がわからない。どのような場合でも、以下のコードは、Aboutパスがアクティブにされない限り、最初にHomeコンポーネントを選択するようです。

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

対

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

最初のケースの利点/目的は何ですか？

javascriptreactjsreact-routerurl-routing
97
Nick Pineda

上の例では、/に移動すると、Appが子として渡されてHomeがレンダリングされます。下の例では、/に移動すると、パスが一致しないため、neitherAppもHomeもレンダリングされてAboutがレンダリングされます。

古いバージョンのReactルーターの場合、関連するバージョンの Index Routes and Index Linksページ で詳細を参照できます。バージョン4.0以降、Reactルーターは、IndexRoute抽象化を使用して同じ目標を達成しなくなりました。

90
Michelle Tilley