Adatszerkesztési útvonal létrehozása a React Routerben

Az előző leckében létrehoztunk egy szerkesztő űrlapot különálló React komponensben EditProduct.

Most írjunk egy loader függvényt az új útvonalhoz az importok után és a EditProduct függvény előtt. Ez ugyanolyan lesz, mint a product.jsx fájlban. A függvénynek átadódnak az URL paraméterek, majd a terméket lekérjük annak id-ja alapján:

routes/edit.jsxexport async function loader({ params }) {
  const product = await getProduct(params.productId);
  return { product };
}

Importáljuk a getProduct függvényt a forStorage.js fájlból:

routes/edit.jsximport { getProduct } from '../forStorage';

Most megnyitjuk a main.jsx fájlt és importáljuk a létrehozott komponenst EditProduct és a loader függvényt:

main.jsximport EditProduct, { loader as editProductLoader } from './routes/edit';

Ezután adjuk hozzá a children tömbhöz a szerkesztési útvonal objektumát közvetlenül a termék útvonala után:

main.jsxchildren: [
  {
    path: 'products/:productId',
    element: <Product />,
    loader: productLoader,
  },
  {
    path: 'products/:productId/edit',
    element: <EditProduct />,
    loader: editProductLoader,
  },
],

Most indítsuk el az alkalmazást, hozzunk létre egy terméket, kattintsunk rá, majd a szerkesztés gombra és meglátjuk a űrlapunkat.

Egyetlen dolog, amit még meg kell tennünk, hogy az űrlap mezőiben a szerkesztés előtt betöltődjenek a jelenlegi adatok. Ehhez importáljuk a edit.jsx fájlba a useLoaderData hook-ot:

routes/edit.jsximport { Form, useLoaderData } from 'react-router-dom';

És alkalmazzuk a loader adatainak lekérésére a EditProduct függvényben. Helyezzük el a return parancs elé:

routes/edit.jsxconst { product } = useLoaderData();

Most adjunk hozzá minden input elemhez egy defaultValue attribútumot a megfelelő értékekkel minden egyes inputhoz. Például, az első input így fog kinézni:

routes/edit.jsx<input
  placeholder="name"
  type="text"
  name="name"
  defaultValue={product.name}
/>

A maradék két input értéke rendre 'product.cost' és 'product.amount' lesz. Igaz, egyelőre még nincsenek adataink az űrlapban.