Brisanje rute u React Routeru

Funkciju za brisanje podataka iz skladišta smo napisali. Hajde sada da dodamo u izgled stranice proizvoda deo koda sa dugmetom za brisanje proizvoda. Dodajmo ga odmah posle dugmeta za izmenu. Obuhvatimo obe forme sa dugmadima u div #control. Zatim u action upišemo vrednost 'delete'. Takođe ćemo dodati dijalog prozor, da bi korisnik još jednom potvrdio - da li želi da izbriše proizvod:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">izmeni</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Da li želite da izbrišete ovaj proizvod?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">obriši</button>
  </Form>
</div>

Dodajmo takođe nekoliko stilova u naš CSS fajl:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

A sada ćemo kreirati novu rutu za brisanje proizvoda. Za to otvorite fasciklu routes i napravite u njoj fajl delete.jsx. Dodajmo u njega odmah import redirect i funkcije za brisanje deleteProduct:

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

A zatim, prirodno, pišemo našu funkciju action, koja će pozivati deleteProduct preko id, a nakon brisanja će nas preusmeriti na početnu stranicu:

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

Ostaje nam samo da otvorimo main.jsx. Importujemo naš action:

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

I postavimo ga kao vrednost za metod action rute za brisanje. Sam objekat rute ćemo dodati na kraj niza children:

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

Sada možemo da kliknemo na neki proizvod i da ga obrišemo pomoću dugmeta za brisanje. Možete da pogledate u localforage panela za razvoj i uverite se u to.