Kreiranje rute za uređivanje podataka u React Router

Na prošloj lekciji kreirali smo formu za uređivanje u zasebnom React komponentu EditProduct.

Hajde sada da napišemo funkciju loadera za novu rutu odmah posle importa i pre funkcije EditProduct. Ona će biti ista kao u product.jsx. U funkciju će biti prosleđeni URL parametri i zatim ćemo dobijati proizvod po njegovom id:

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

Importujemo getProduct iz forStorage.js:

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

A sada ćemo otvoriti naš main.jsx i importovati kreiranu komponentu EditProduct i loader:

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

Zatim dodajmo u niz children objekat rute za uređivanje odmah posle rute za proizvod:

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

Sada pokrenimo aplikaciju, kreirajmo proizvod, kliknimo na njega, a zatim na dugme za uređivanje i videćemo našu formicu.

Jedino, još treba da uradimo tako da u poljima forme pre uređivanja budu učitani trenutni podaci. Za ovo importujemo u edit.jsx hook useLoaderData:

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

I primenimo ga za dobijanje podataka iz loadera u funkciji EditProduct. Dodajmo ga pre komande return:

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

Sada dodajmo u svaki tag input atribut defaultValue sa odgovarajućim vrednostima za svaki input. Na primer, prvi input sada će izgledati ovako:

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

Za dva preostala inputa vrednosti će biti redom 'product.cost' i 'product.amount'. Istina za sada podataka u formi mi nemamo.