Създаване на маршрут за редактиране на данни в React Router

В предишния урок създадохме форма за редактиране в отделен React компонент EditProduct.

Сега нека напишем функция за зареждане за нов маршрут веднага след импортирането и преди функцията EditProduct. Тя ще бъде същата като в product.jsx. В функцията ще се предават URL параметри и след това ще получаваме продукта по неговия id:

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

Импортираме getProduct от forStorage.js:

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

А сега ще отворим нашия main.jsx и ще импортираме създадения от нас компонент EditProduct и зареждащия функция:

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

След това ще добавим в масива children обект на маршрута за редактиране веднага след маршрута за продукт:

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

Сега нека стартираме приложението, да създадем продукт, да кликнем върху него, а след това върху бутона за редактиране и ще видим нашата форма.

Единственото, което още трябва да направим, е да се уверим, че в полетата на формата преди редактирането са заредени текущите данни. За това ние импортираме в edit.jsx куката useLoaderData:

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

И ще я приложим за получаване на данни от зареждащата функция във функцията EditProduct. Добавяме я преди командата return:

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

Сега ще добавим във всеки таг input атрибут defaultValue със съответните стойности за всеки input. Например, първият input сега ще изглежда така:

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

За останалите два input стойностите ще бъдат съответно 'product.cost' и 'product.amount'. Въпреки че засега нямаме данни във формата.