Удаление маршрута в React Router

Функцию для удаления данных из хранилища мы написали. Давайте теперь добавим в верстку странички продукта кусок кода с кнопкой для удаления продукта. Добавим его сразу после кнопки редактирования. Обернем обе формы с кнопками в див #control. Затем в action запишем значение 'delete'. Также мы добавим диалоговое окошко, чтобы юзер еще раз подтвердил - хочет ли он удалить продукт:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">edit</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Do you want to delete this product?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">delete</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';

А затем, естественно, пишем нашу функцию action, которая будет вызывать deleteProduct по id, а после удаления перенаправит нас на главную страничку:

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 панели разработчика и убедиться в этом.