Vytvorenie trasy pre editáciu dát v React Router

V minulej lekcii sme vytvorili formulár pre editáciu v samostatnej React komponente EditProduct.

Teraz napíšme funkciu loader pre novú trasu hneď po importe a pred funkciou EditProduct. Bude rovnaká ako v product.jsx. Do funkcie budú odovzdávané URL parametre a následne budeme získavať produkt podľa jeho id:

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

Importujme getProduct z forStorage.js:

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

A teraz otvoríme náš main.jsx a importujeme vytvorenú komponentu EditProduct a loader:

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

Potom pridajme do poľa children objekt trasy pre editáciu hneď po trase pre produkt:

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

Teraz spustíme aplikáciu, vytvoríme produkt, klikneme naň, a potom na tlačidlo editácie a uvidíme náš formulár.

Jediné, čo ešte potrebujeme urobiť, je zabezpečiť, aby v poliach formulára pred editáciou boli načítané aktuálne dáta. Na to importujeme v edit.jsx hook useLoaderData:

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

A aplikujeme ho na získanie dát z loadera v funkcii EditProduct. Pridajme ho pred príkaz return:

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

Teraz pridajme do každého tagu input atribút defaultValue so zodpovedajúcimi hodnotami pre každý input. Napríklad, prvý input bude teraz vyzerať takto:

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

Pre dva zostávajúce inputy budú hodnoty zodpovedajúco 'product.cost' a 'product.amount'. Pravda, zatiaľ dáta vo formulári nemáme.