Opprettelse av rute for dataredigering i React Router

I forrige leksjon opprettet vi et skjema for redigering i en egen React- komponent EditProduct.

La oss nå skrive en loader-funksjon for den nye ruten rett etter importen og før funksjonen EditProduct. Den vil være den samme som i product.jsx. I funksjonen vil URL-parametere bli sendt og deretter vil vi hente produktet etter dets id:

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

Importer getProduct fra forStorage.js:

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

Og nå skal vi åpne vår main.jsx og importere komponenten vi opprettet EditProduct og loaderen:

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

Deretter legger vi til i arrayet children et ruteobjekt for redigering rett etter ruten for produktet:

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

La oss nå starte applikasjonen, opprette et produkt, klikke på det, og deretter på redigeringsknappen og se skjemaet vårt.

Det eneste, vi trenger også å gjøre så feltene i skjemaet har de nåværende dataene lastet inn før redigering. For dette importerer vi i edit.jsx hooken useLoaderData:

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

Og bruker den for å hente data fra loaderen i funksjonen EditProduct. Legg den til før kommandoen return:

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

La oss nå legge til i hver input-tag attributten defaultValue med de tilsvarende verdiene for hver input. For eksempel, den første inputen vil nå se slik ut:

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

For de to gjenværende inputene vil verdiene vare henholdsvis 'product.cost' og 'product.amount'. Men foreløpig har vi ingen data i skjemaet.