Стварэнне маршруту для рэдагавання дадзеных у React Router

На мінулым уроке мы стварылі форму для рэдагавання ў асобным React кампаненце EditProduct.

Давайце цяпер напiшам функцыю загрузчыка для новага маршруту адразу пасля імпарту і перад функцыяй 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();

Цяпер дадамо ў кожны тэг інпут атрыбут defaultValue з адпаведнымі значэннямі для кожнага інпута. Напрыклад, першы інпут цяпер будзе выглядаць так:

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

Для двух яшчэ інпутаў значэнні будуць адпаведна 'product.cost' і 'product.amount'. Праўда пакуль што дадзеных у форме ў нас няма.