React Routerでのルート削除

データストアからデータを削除する関数は作成しました。では、プロダクトページのマークアップに、プロダクト削除用のボタンを含むコードを追加しましょう。編集ボタンの直後に追加します。両方のボタンフォームを div #control で囲みます。そして action に値 'delete' を記述します。また、ユーザーが本当にプロダクトを削除したいか確認できるよう、ダイアログも追加します：

<div id="control">
	<Form action="edit">
		<button type="submit">編集</button>
	</Form>
	<Form
		method="post"
		action="delete"
		onSubmit={(event) => {
			if (!confirm('このプロダクトを削除しますか？')) {
				event.preventDefault();
			}
		}}
	>
		<button type="submit">削除</button>
	</Form>
</div>

CSSファイルにもスタイルを追加しましょう：

div#control {
	display: flex;
}

button {
	margin-right: 5px;
}

では、プロダクト削除用の新しいルートを作成します。そのためには、 routes フォルダを開き、その中に delete.jsx ファイルを作成します。すぐに redirect と削除関数 deleteProduct をインポートしましょう：

import { redirect } from 'react-router-dom';
import { deleteProduct } from '../forStorage';

そして、もちろん、 id に基づいて deleteProduct を呼び出し、削除後にメインページにリダイレクトする action 関数を記述します：

export async function action({ params }) {
	await deleteProduct(params.productId);
	return redirect('/');
}

あとは main.jsx を開くだけです。私たちの action をインポートします：

import { action as deleteAction } from './routes/delete';

そして、削除ルートの action メソッドの値として設定します。ルートオブジェクト自体は、 children 配列の末尾に追加します：

{
	path: 'products/:productId/delete',
	action: deleteAction,
},

これで、任意のプロダクトをクリックし、削除ボタンを使って削除できるようになりました。開発者パネルの localforage を確認して、削除されたことを確かめてください。

過去のレッスンの課題で作成したアプリケーションを使用してください。このレッスンの内容を参考に、学生削除用のボタンを追加し、削除用の新しいルートを作成し、それを子ルートに追加してください。全てが正常に動作することを確認しましょう。