React Routerへの別のルートの追加

ホームページへのルートルートがあり、そこには製品へのリンクがあります。では次に、もう1つのルートを追加して、リンクの1つをクリックしたときにエラー画面ではなく製品ページが表示されるようにしましょう。

まず、前回のレッスンで作成したアプリケーションを開き、フォルダ routes にファイル product.jsx を作成します。その中にコンポーネント Product を作りましょう：

function Product() {}

export default Product;

次に、Product 内にプロパティ name、 cost、amount を持つオブジェクト product を作成します。今のところ、これらはいくつかの固定値です：

function Product() {
	const product = {
		name: '製品',
		cost: 400,
		amount: 5,
	};
}

export default Product;

そして、製品ページでは、それに応じて製品名、コスト、数量を表示します：

return (
	<div>
		<h2>製品ページ</h2>
		<p>名前： {product.name}</p>
		<p>コスト： {product.cost}</p>
		<p>数量： {product.amount}</p>
	</div>
);

コンポーネント Product をファイル main.jsx に必ずインポートしましょう：

import Product from './routes/product';

最後に、アプリケーションにもう1つのルートを追加します。ルートルートの直後に作成します。パスとして 'products/:productId' を指定し、表示する要素としてコンポーネント Product を使用します：

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

では、アプリケーションを起動し、リンクをクリックして製品ページに移動してみましょう（現時点ではすべてのリンクで同じページですが）、エラーページではなくなっているはずです。

過去のレッスンの課題で作成したアプリケーションを使用してください。このレッスンの内容を参考にして、同様にファイル student.jsx を作成し、学生ページに名前、名字、入学年、専攻を表示させてください。 main.jsx ファイルに学生ページの新しいルートを追加し、 path の値を 'students/:studentId' に設定してください。リンクをクリックすると、学生ページに移動することを確認してください。