Brisanje poti v React Router

Funkcijo za brisanje podatkov iz shrambe smo napisali. Dajmo zdaj dodati v razporeditev strani izdelka kos kode z gumbom za brisanje izdelka. Dodajmo ga takoj za gumbom za urejanje. Ovojmo obe obrazci z gumbi v div #control. Nato v action zapišimo vrednost 'delete'. Prav tako bomo dodali pogovorno okno, da se uporabnik še enkrat potrdi - ali želi izbrisati izdelek:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">uredi</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Ali res želite izbrisati ta izdelek?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">izbriši</button>
  </Form>
</div>

Dodajmo tudi nekaj stilov v našo CSS datoteko:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

In zdaj bomo ustvarili novo pot za brisanje izdelka. Če želite to narediti, odprite mapo routes in v njej ustvarite datoteko delete.jsx. Dodajmo vanj takoj uvoz redirect in funkcijo za brisanje deleteProduct:

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

In nato, seveda, napišemo našo funkcijo action, ki bo klicala deleteProduct po id, in po brisanju nas preusmerila na domačo stran:

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

Ostaja nam le še, da odpremo main.jsx. Uvozimo naš action:

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

In ga nastavimo kot vrednost za metodo action poti za brisanje. Sam objekt poti bomo dodali na konec matrike children:

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

Zdaj lahko kliknemo na kateri koli izdelek in ga izbrišemo s pomočjo gumba za brisanje. Lahko pogledate v localforage razvojnega orodja in se prepričate o tem.