Reduxでのブラウザにおける商品ページ

前回のレッスンでは、商品の個別ページを作成しました。次に、何らかのボタンをクリックしたときにブラウザにそのページが表示されるようにする必要があります。

まず、表示されるアドレスを割り当てましょう。ルートを定義するApp.jsxファイルを開き、 childrenにさらに子ルートを追加します（ProductPage.jsxのインポートを忘れないでください）。パスと表示するコンポーネントを指定します：

{
	path: '/products/:productId',
	element: <ProductPage />,
},

次に、productsフォルダ内のProductsList.jsxを開き、 dispProductsのコードを少し変更します。各商品の完全な情報を持つ個別ページができたので、商品リストでは商品名と短縮された説明文のみを表示します。また、ルーターライブラリのナビゲーション要素であるLinkをリンクとして追加し、クリックすると商品ページに移動できるようにします。さらに、商品を区切るためにdivにクラスproduct-excerptを追加します。これでdispProductsのコードは次のようになります：

const dispProducts = products.map((product) => (
	<div key={product.id} className="product-excerpt">
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<Link to={`/products/${product.id}`} className="link-btn">
			view
		</Link>
	</div>
))

Linkをインポートします：

import { Link } from 'react-router-dom'

そして、index.cssでクラスlink-btnと product-excerptのスタイルを追加します：

.product-excerpt {
	margin-top: 30px;
	border: 1px solid gray;
	border-radius: 5px;
	padding: 10px;
}

.link-btn {
	border: 1.5px solid gray;
	border-radius: 10px;
	background-color: coral;
	color: black;
	padding: 1px 12px 1px 12px;
}

最後に、左メニューにある商品リストページへのリンクを機能させ、他の場所からもアクセスできるようにしましょう。そのためにroot.jsxを開き、このコード行を置き換えます：

<a>Products</a>

次のように：

<NavLink to="/products" end>
	Products
</NavLink>

React RouterライブラリからNavLinkをインポートするのも忘れないでください：

import { Outlet, NavLink } from 'react-router-dom'

アプリケーションを起動しましょう。これで、表示ボタンをクリックすることで任意の商品の情報ページに移動できます。新しい商品を追加し、個別ページの表示ボタンをクリックしてその情報を確認してみてください。また、商品リストに戻るには、左メニューの 'Products'をクリックするだけで十分です。異なるページにいるときに、ブラウザのアドレスバーのURLがどのように変化するかを確認してください。

学生用のアプリケーションを開いてください。 App.jsxファイルで、学生ページ用にもう一つ子ルートを作成してください。

StudentsList.jsxファイルで、レッスンで示したように dispStudentsのコードに変更を加えてください。

左メニューの'Students'リンクが学生リストページに移動するようにしてください。すべてが機能することを確認してください。

現在いるページに応じて、ブラウザのアドレスバーの値がどのように変化するかを確認してください。