Slette en rute i React Router

Vi har skrevet funksjonen for å slette data fra lagringsplassen. La oss nå legge til et kodesnutt med en knapp for å slette produktet i sidens oppsett. La oss legge det til rett etter redigeringsknappen. Vi omslutter begge skjemaene med knapper i en div #control. Deretter skriver vi verdien 'delete' i action. Vi legger også til en dialogboks som spør brukeren om bekreftelse - om hen virkelig ønsker å slette produktet:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">rediger</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Vil du slette dette produktet?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">slett</button>
  </Form>
</div>

La oss også legge til noen stiler i CSS-filen vår:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

Og nå skal vi opprette en ny rute for å slette produktet. For å gjøre dette, åpner du mappen routes og oppretter en fil i den kalt delete.jsx. La oss legge til import av redirect og slettingsfunksjonen deleteProduct med en gang:

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

Og deretter, selvfølgelig, skriver vi vår action-funksjon, som vil kalle deleteProduct med id, og etter sletting omdirigere oss til hovedsiden:

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

Alt som gjenstår for oss er å åpne main.jsx. Importere vår action:

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

Og sette den som verdi for action-metoden til slettingsruten. Selve ruteobjektet legger vi til på slutten av arrayet children:

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

Nå kan vi klikke på et hvilket som helst produkt og slette det ved hjelp av slettknappen. Du kan sjekke i localforage i utviklerverktøyene og bekrefte at det er gjort.