Útvonal eltávolítása a React Routerban

Megírtuk az adatok törléséhez szükséges függvényt a tárolóból. Most adjuk hozzá a termék oldal elrendezéséhez a törlés gombját tartalmazó kódrészt. Helyezzük el közvetlenül a szerkesztés gombja után. Csomagoljuk mindkét gombot tartalmazó űrlapot egy #control div-be. Ezután az action értékébe írjuk be a 'delete' értéket. Hozzáadunk egy párbeszédablakot is, hogy a felhasználó megerősítse - biztosan törölni szeretné-e a terméket:

routes/product.jsx<div id="control">
  <Form action="edit">
    <button type="submit">szerkesztés</button>
  </Form>
  <Form
    method="post"
    action="delete"
    onSubmit={(event) => {
      if (!confirm('Biztosan törölni szeretnéd ezt a terméket?')) {
        event.preventDefault();
      }
    }}
  >
    <button type="submit">törlés</button>
  </Form>
</div>

Adjunk hozzá néhány stílust a CSS fájlunkhoz:

index.cssdiv#control {
  display: flex;
}

button {
  margin-right: 5px;
}

Most pedig készítsünk egy új útvonalat a termék törléséhez. Ehnyomozd meg a routes mappát, és hozz létre benne egy delete.jsx fájlt. Adjuk hozzá azonnal az redirect importját és a törlő függvényt deleteProduct:

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

Majd természetesen megírjuk a action függvényünket, amely meghívja a deleteProduct függvényt a id alapján, és a törlés után átirányít a főoldalra:

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

Már csak meg kell nyitnunk a main.jsx fájlt. Importáljuk a action függvényünket:

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

És beállítjuk értéknek a action tulajdonságához a törlés útvonalán. Magát az útvonal objektumot a children tömb végére adjuk hozzá:

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

Most már rákattinthatunk valamelyik termékre, és törölhetjük azt a törlés gombbal. Beléphetsz a fejlesztői panel localforage-jébe, hogy meggyőződj erről.