IndexRouteとIndexLinkを使用する目的がわかりません。いずれの場合も、Aboutパスがアクティブ化されていない限り、下のコードが最初にホームコンポーネントを選択したようです。React-Router：IndexRouteの目的は何ですか？
<Route path="/" component={App}>
<Route path="home" component={Home}/>
<Route path="about" component={About}/>
</Route>
最初の例ここでの利点/目的は何ですか？対
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="about" component={About}/>
</Route>
上の例では、/に行くとAppとHomeが子として渡されます。下の例では、/に行くと、どちらのパスも一致しないので、AppをとHomeとAboutにレンダリングします。
より古いバージョンのReact Routerの場合は、関連するバージョンのIndex Routes and Index Links pageで詳細を参照できます。バージョン4.0以降、React Routerは同じ目的を達成するために抽象度IndexRouteを使用しなくなりました。
実際にこの機能を使用するにはどうすればよいですか？ – seasonqwe
たとえば、1つの親コンテナ、複数の子ルートを作成し、これらの子ルートの1つをデフォルト（IndexRoute）として設定することができます。私たちがデフォルトの子ルートを必要とせず、何かを選択することをユーザーに示唆する必要がある場合（IndexRouteはありません） –
@ AlexHopeO'Connorありがとうございます。答えの後半を更新しました –
アプリケーションコンポーネントがレンダリングされますが、その子はありません。そのため、アプリケーション内のthis.props.childrenは未定義です。デフォルトのUIをレンダリングするには、簡単に{this.props.children || <Home/>}を実行することができます。
しかし、ホームはonEnterフックなどのようにルーティングに参加することはできません。アカウントやステートメントと同じ位置にレンダリングするので、ルータではのIndexRouteを持つファーストクラスのルートコンポーネントをホームにすることができます。
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="accounts" component={Accounts}/>
<Route path="statements" component={Statements}/>
</Route>
</Router>
今のAppは{this.props.children}をレンダリングすることができますし、我々は、ルーティングに参加することができますホームのためのファーストクラスのルートを持っています。
パスが '/ home'でない限り、最初の例で' Home'が選ばれるのはなぜですか？ドキュメントの説明を確認してください：https://github.com/rackt/react-router/blob/master/docs/guides/basics/IndexRoutes.md –
メインがナビゲーションバーであり、ホームとナビゲーションバー上でクリックできるメインページです。 –
上の例では、 '/'に行くと 'Home'を子として渡して' App'をレンダリングします。一番下の例では、 '/'に行くことは '' App''を '' Home''または '' About''をレンダリングしない*でレンダリングします。 –