Ta bort en rutt i React Router

Vi har skrivit funktionen för att ta bort data från lagringen. Låt oss nu lägga till en del kod med en knapp för att ta bort produkten i sidans utseende. Vi lägger till den direkt efter redigeringsknappen. Vi omsluter båda formulären med knappar i en div #control. Sedan i action skriver vi värdet 'delete'. Vi lägger också till en dialogruta så att användaren kan bekräfta igen - om hen verkligen vill ta bort produkten:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">edit</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Do you want to delete this product?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">delete</button>
  </Form>
</div>

Låt oss också lägga till lite stilar i vår CSS-fil:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

Och nu ska vi skapa en ny rutt för att ta bort produkten. För att göra detta, öppna mappen routes och skapa filen delete.jsx i den. Låt oss lägga till importen av redirect och borttagningsfunktionen deleteProduct direkt:

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

Och sedan, naturligtvis, skriver vi vår funktion action, som kommer att anropa deleteProduct med id, och efter borttagningen omdirigera oss till startsidan:

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

Allt som återstår för oss är att öppna main.jsx. Importera vår action:

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

Och ställ in den som värde för metoden action i borttagningsrutten. Själva ruttobjektet lägger vi till i slutet av arrayen children:

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

Nu kan vi klicka på någon produkt och ta bort den med hjälp av borttagningsknappen. Du kan kolla in localforage i utvecklarpanelen och verifiera detta.