React Routerにおけるネストされたルート

このレッスンでは、ネストされたルートについて学びます。前回のレッスンで作成したアプリケーションを起動してください。リンクをクリックすると、商品の個別ページに移動します。しかし、この表示方法が不便で、商品一覧と商品ページを一目で確認できるように、同じ画面に並べて表示したいと仮定しましょう。それでは、そのように変更してみます。

そのために、main.jsxファイルを開き、商品ページのルートをルートルートの子ルートにする、つまりルートルートに「ネスト」します。これには、ルートオブジェクトのもう一つのプロパティであるchildrenを使用します。

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

再度リンクをクリックしてみますが、商品一覧の右側には何も表示されません。これは、親ルートに子ルートをどこにレンダリングしたいかを指示していないためです。

親ルート内で子ルートの要素をレンダリングするために、Outletコンポーネントが役立ちます。ライブラリからインポートして、ルートルート用のファイルに追加しましょう。

import { Outlet } from 'react-router-dom';

次に、#productというdivで囲み、ルートルートのレイアウトのnav閉じタグの後に追加します。さらに、この構造全体を#mainという別のdivで囲みます。

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

これでリンクをクリックすると、商品一覧と商品ページの両方が表示されるようになります。

次に、index.cssに少しスタイルを追加しましょう。

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

前回のレッスンの課題で作成したアプリケーションを使用してください。このレッスンの内容を参考に、学生詳細ページへのルートをルートルートにネストさせてください。

さらに、リンクをクリックしたときに、学生一覧と学生詳細ページの両方が画面に表示されるようにしてください。