# Создание маршрута для редактирования данных в React Router

На прошлом уроке мы создали форму для редактирования в отдельном React компоненте `EditProduct`.

Давайте теперь напишем функцию загрузчика для нового маршрута сразу после импорта и перед функцией `EditProduct`. Она будет такой же, как и в `product.jsx`. В функцию будут передаваться URL параметры и далее мы будем получать продукт по его `id`:

`export async function loader({ params }) { const product = await getProduct(params.productId); return { product }; }`

Импортируем `getProduct` из `forStorage.js`:

`import { getProduct } from '../forStorage';`

А сейчас мы откроем наш `main.jsx` и импортируем созданный нами компонент `EditProduct` и загрузчик:

`import EditProduct, { loader as editProductLoader } from './routes/edit';`

Затем добавим в массив `children` объект маршрута для редактирования сразу после маршрута для продукта:

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

Теперь запустим приложение, создадим продукт, кликнем по нему, а затем по кнопке редактирования и увидим нашу формочку.

Единственное, еще нам нужно сделать так, чтобы в полях формы перед редактированием были загружены текущие данные. Для этого мы импортируем в `edit.jsx` хук `useLoaderData`:

`import { Form, useLoaderData } from 'react-router-dom';`

И применим его для получения данных из загрузчика в функции `EditProduct`. Добавим его перед командой `return`:

`const { product } = useLoaderData();`

Теперь добавим в каждый тег инпут атрибут `defaultValue` с соответсвующими значениями для каждого инпута. Например, первый инпут теперь будет выглядеть так:

`<input placeholder="name" type="text" name="name" defaultValue={product.name} />`

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

Возьмите приложение, созданное вами в заданиях к прошлым урокам. Пользуясь материалами урока, создайте функцию `loader` в `edit.jsx` для маршрута редактирования данных студента.

Добавьте в массив `children` объект маршрута для редактирования.

Добавьте для вашей функции `EditStudent` требуемый в уроке код.

← →
↑