Odstranění trasy v React Router

Funkci pro odstranění dat z úložiště jsme napsali. Pojďme nyní přidat do rozvržení stránky produktu kus kódu s tlačítkem pro odstranění produktu. Přidáme jej ihned po tlačítku úprav. Obě formuláře s tlačítky obalíme do div #control. Poté do action zapíšeme hodnotu 'delete'. Také přidáme dialogové okno, aby se uživatel znovu potvrdil - chce li produkt odstranit:

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>

Přidejme také stylů do našeho CSS souboru:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

A nyní vytvoříme novou trasu pro odstranění produktu. Pro otevření složky routes a vytvoření v ní souboru delete.jsx. Přidejme do něj ihned import redirect a funkce odstranění deleteProduct:

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

A poté, přirozeně, píšeme naši funkci action, která bude volat deleteProduct podle id, a po odstranění nás přesměruje na hlavní stránku:

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

Zbývá nám pouze otevřít main.jsx. Importovat naši action:

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

A nastavit ji jako hodnotu pro metodu action trasy odstranění. Samotný objekt trasy přidáme na konec pole children:

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

Nyní můžeme kliknout na nějaký produkt a odstranit jej pomocí tlačítka odstranění. Můžete nahlédnout do localforage panelu vývojáře a přesvědčit se o tom.