Брисање руте у Реацт Роутеру

Функцију за брисање података из складишта смо написали. Хајде сада да додамо у верстку странице производа део кода са дугметом за брисање производа. Додајмо га одмах после дугмета за уређивање. Омотајмо оба облика са дугмадима у див #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>

Додајмо и неких стилова у наш ЦСС фајл:

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 панели програмера и убедити се у томе.