Vytvoření trasy pro editaci dat v React Router

V minulé lekci jsme vytvořili formulář pro editaci v samostatné React komponentě EditProduct.

Nyní napišme funkci loaderu pro novou trasu hned po importu a před funkcí EditProduct. Bude stejná jako v product.jsx. Do funkce budou předány URL parametry a následně získáme produkt podle jeho id:

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

Importujeme getProduct z forStorage.js:

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

Nyní otevřeme náš main.jsx a importujeme vytvořenou komponentu EditProduct a loader:

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

Poté přidáme do pole children objekt trasy pro editaci hned po trase pro produkt:

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

Nyní spusťme aplikaci, vytvořme produkt, klikněme na něj a poté na tlačítko editace a uvidíme náš formulář.

Jediné, co ještě musíme udělat, je zajistit, aby v polích formuláře před editací byly načteny aktuální data. K tomu importujeme v edit.jsx hook useLoaderData:

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

A použijeme jej pro získání dat z loaderu ve funkci EditProduct. Přidejme jej před příkaz return:

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

Nyní přidejme do každého tagu input atribut defaultValue s odpovídajícími hodnotami pro každý input. Například, první input bude nyní vypadat takto:

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

Pro zbývající dva inputy budou hodnoty 'product.cost' a 'product.amount'. Ovšem zatím data ve formuláři nemáme.