React Routerのインデックスルート

このレッスンでは、インデックスルートとは何かを学びます。

まず、あることに注目してみましょう。私たちがホームページにいるとき、右側には何も表示されていない空の画面が見えます。これは、子ルートのどれもがアドレス / に一致せず、その場合に何を表示するかを指定していないためです。このような場合、空白のページを表示しないようにするために、インデックスルートを利用できます。これはパスを持たない子ルートで、子ルートのセットのどれもが一致しない場合に、親の Outlet にその要素が表示されます。このようなルートを使用して、何らかの情報や統計、またはその他の類似のコンテンツを配置できます。通常のルートと同様に、データのロードにも使用できます。

それでは、routes フォルダ内にファイル index.jsx を作成し、その中にコンポーネント Index を定義しましょう。

export default function Index() {
	return (
		<div>
			<p>Hi, React Router!</p>
			<p>This is an application for my products :)</p>
		</div>
	);
}

次に、main.jsx に移動し、そこで私たちのコンポーネント Index をインポートします。

import Index from './routes/index';

そして、配列 children の最初の要素として、プロパティ index を true に設定し、表示する要素として私たちのコンポーネント Index を持つオブジェクトを追加します。

{ index: true, element: <Index /> },

前回のレッスンの課題で作成したアプリケーションを使用してください。このレッスンの内容を参考に、何らかのテキストを持つホームページアドレス用のインデックスルートを追加してください。