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' булади. Лекин ҳозирча шаклда маълумотлар йўқ.

Ўтган дарслардаги вазифаларда яратган иловангизни олинг. Дарс материалларидан фойдаланиб, edit.jsx да студент маълумотларини таҳрирлаш маршрути учун loader функциясини яратинг.

children массивига таҳрирлаш учун маршрут объектини қўшинг.

EditStudent функциянгиз учун дарсда талаб қилинган кодни қўшинг.