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