React-Router:IndexRouteの目的は何ですか?


102

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>

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


Homeパスが/homeそうでない限り、最初の例ではなぜ選択されますか?ドキュメントの説明を確認してください:github.com/rackt/react-router/blob/master/docs/guides/basics/…–
— Michelle Tilley

メインがナビゲーションバーであり、ホームと概要がナビゲーションバーでクリックできるメインページであると想像できます。
— Nick Pineda

2
上の例では、to /はApp、Homepassed with a childでレンダリングされます。一番下の例では、どちらのパスも一致しない/ためApp、どちら HomeでもAboutレンダリングされるか、レンダリングされません。
— ミシェルティリー

2
おお!これを答えにして、クレジットを差し上げますか?ありがとうございました!
— Nick Pineda

3
v0.13からv1.0への変更では、名前をからDefaultRouteに変更しましたIndexRoute。「デフォルト」の方が目的を説明していると思います。github.com/rackt/react-router/blob/master/...
— Clarkie

回答:


101

上の例では、to /はApp、Homepassed with a childでレンダリングされます。下の例では、どちらのパスも一致しないので、どちらも/レンダリングされずApp、どちら HomeもAboutレンダリングされません。

古いバージョンのReact Routerの詳細については、関連するバージョンの[ インデックスルートとインデックスリンク]ページをご覧ください。バージョン4.0以降、React RouterはIndexRoute抽象化を使用して同じ目標を達成しなくなりました。


3
では、この機能を実際に使用するにはどうすればよいでしょうか。
— seasonqwe 2016年

1
たとえば、1つの親コンテナといくつかの子ルートを作成し、これらの子ルートの1つをデフォルト(IndexRoute)として設定できます。または、デフォルトの子ルートが不要で、ユーザーに何かを選択するように指示する必要がある場合(その場合はIndexRouteはありません)
— Olga Gnatenko

1
@ AlexHopeO'Connorありがとう、回答の後半を更新しました
— ミシェルティリー

子供として渡されたものは正確に何を意味しますか?バックグラウンドでロードしていますか?小道具にアクセスできるか?その他?
— StLia 2017
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.