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();

Эми ар бир инпут тегине тиешелүү маанилер менен defaultValue атрибутун кошобуз. Мисалы, биринчи инпут азыр төмөнкүдөй көрүнөт:

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

Калган эки инпут үчүн маанилер тиешелүүлүгүнө жараша 'product.cost' жана 'product.amount' болот. Бирок, азырынча формабызда маалыматтар жок.