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