Създаване на маршрут за редактиране на данни в 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();

Сега ще добавим във всеки таг input атрибут defaultValue със съответните стойности за всеки input. Например, първият input сега ще изглежда така:

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

За останалите два input стойностите ще бъдат съответно 'product.cost' и 'product.amount'. Въпреки че засега нямаме данни във формата.

Вземете приложението, създадено от вас в задачите към предишните уроци. Използвайки материалите от урока, създайте функция loader в edit.jsx за маршрута за редактиране на данни за студент.

Добавете в масива children обект на маршрута за редактиране.

Добавете към вашата функция EditStudent необходимия код от урока.