Создание маршрута для редактирования данных в 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 требуемый в уроке код.