Krijimi i një rrugësimi për redaktimin e të dhënave në React Router

Në mësimin e kaluar, ne krijuam një formular për redaktim në një komponent të veçantë React EditProduct.

Tani le të shkruajmë funksionin e loader-it për rrugësimin e ri menjëherë pas importimeve dhe përpara funksionit EditProduct. Ai do të jetë i njëjtë si në product.jsx. Në funksion do të kalohen parametrat e URL-it dhe më pas do të marrim produktin sipas id të tij:

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

Le të importojmë getProduct nga forStorage.js:

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

Tani do të hapim main.jsx tonë dhe do të importojmë komponentin e krijuar nga ne EditProduct dhe loader-in:

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

Pastaj do të shtojmë në array-in children objektin e rrugës për redaktim menjëherë pas rrugës për produktin:

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

Tani le të startojmë aplikacionin, të krijojmë një produkt, të klikojmë mbi të, dhe pastaj mbi butonin e redaktimit dhe do të shohim formularin tonë.

E vetmja gjë, ne duhet gjithashtu ta bëjmë që në fushat e formularit përpara redaktimit të ngarkohen të dhënat aktuale. Për këtë ne do të importojmë në edit.jsx hook-un useLoaderData:

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

Dhe do ta aplikojmë atë për të marrë të dhënat nga loader-i në funksionin EditProduct. Le ta shtojmë atë para komandës return:

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

Tani le të shtojmë në çdo tag input atributin defaultValue me vlerat përkatëse për çdo input. Për shembull, input-i i parë tani do të duket kështu:

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

Për dy input-et e mbetur vlerat do të jenë përkatësisht 'product.cost' dhe 'product.amount'. Megjithatë tani për tani nuk kemi të dhëna në formular.