React Routerでのルート削除

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

routes/product.jsx<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ファイルにもスタイルを追加しましょう：

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

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

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

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

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

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

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

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

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

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