Ștergerea rutei în React Router

Am scris funcția pentru ștergerea datelor din depozit. Să adăugăm acum în markup-ul paginii produsului o bucată de cod cu un buton pentru ștergerea produsului. Să o adăugăm imediat după butonul de editare. Să împachetăm ambele formulare cu butoane într-un div #control. Apoi în action vom scrie valoarea 'delete'. De asemenea, vom adăuga o fereastră de dialog pentru ca utilizatorul să confirme încă o dată - dacă vrea să șteargă produsul:

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>

Să adăugăm și niște stiluri în fișierul nostru CSS:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

Iar acum vom crea o nouă rută pentru ștergerea produsului. Pentru aceasta deschideți directorul routes și creați în el fișierul delete.jsx. Să adăugăm în el imediat importul redirect și funcția de ștergere deleteProduct:

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

Și apoi, în mod natural, scriem funcția noastră action, care va chema deleteProduct după id, iar după ștergere ne va redirecționa către pagina principală:

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

Ne rămâne doar să deschidem main.jsx. Să importăm action-ul nostru:

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

Și să îl setăm ca valoare pentru metoda action a rutei de ștergere. Însuși obiectul rutei îl vom adăuga la sfârșitul array-ului children:

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

Acum putem face clic pe un produs și să îl ștergem cu ajutorul butonului de ștergere. Puteți arunca o privire în panoul localforage al dezvoltatorului și să vă convingeți de acest lucru.