Бришење на рута во 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('Дали сакате да го избришете овој производ?')) {
        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 на панелот за разработка и да се уверите во тоа.