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

前回のレッスンでは、商品編集用のフォームを作成しました。それにルートを設定しましょう。

商品管理アプリケーションを開き、ファイル App.jsx を開きます。 children プロパティの配列に、もう一つ子ルートオブジェクトを追加します（EditProductForm のインポートを忘れないでください）：

{
	path: '/editProduct/:productId',
	element: <EditProductForm />,
},

また、編集フォームへの遷移にはリンクが必要です。そのために ProductPage.jsx を開き、商品数量を示す最後の段落の後、閉じるdivタグの前にこのリンクを配置します：

<Link to={`/editProduct/${product.id}`} className="link-btn">
	edit
</Link>

また、ルーターライブラリから Link をインポートします：

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

アプリケーションを起動し、任意の商品の「閲覧」ボタンをクリックしてみましょう。編集を試み、左メニューの 'Products' リンクをクリックして商品リストに戻ります。また、Redux DevTools で新しいアクション productUpdated を確認し、 store内の商品オブジェクトの変更を確認できます。

あなたの学生管理アプリケーションを開いてください。 App.jsx ファイルに、学生データ編集用の子ルートをもう一つ追加してください。

学生詳細ページのマークアップに Link 要素を追加し、そのデータ編集ページへの遷移を可能にしてください。

あなたのアプリケーションを起動し、任意の学生のデータ編集を試みてください。編集ページにいる間のブラウザのアドレスバーに注意してください。ブラウザの Redux DevTools での変更を確認してください。