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

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

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