Məlumatların redaktəsi üçün marşrutun yaradılması React Router-də

Keçən dərsdə biz ayrı bir React komponentində EditProduct redaktə forması yaratdıq.

İndi isə importlardan dərhal sonra və EditProduct funksiyasından əvvəl yeni marşrut üçün yükləyici funksiya yazaq. O, product.jsx-də olduğu kimi olacaq. Funksiyaya URL parametrləri ötürüləcək və sonra məhsulu onun id ilə əldə edəcəyik:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

getProduct-i forStorage.js-dən import edək:

import { getProduct } from '../forStorage';

İndi isə biz main.jsx faylımızı açıb yaratdığımız EditProduct komponentini və yükləyicini import edəcəyik:

import EditProduct, { loader as editProductLoader } from './routes/edit';

Sonra isə children massivinə məhsul marşrutundan dərhal sonra redaktə üçün marşrut obyekti əlavə edəcəyik:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
	{
		path: 'products/:productId/edit',
		element: <EditProduct />,
		loader: editProductLoader,
	},
],

İndi proqramı işə salaq, məhsul yaradaq, onun üzərinə klik edək, sonra isə redaktə düyməsinə klik edib formamızı görək.

Tək lazımlı şey, formanın xanalarında redaktədən əvvəl cari məlumatların yüklənməsidir. Bunun üçün biz edit.jsx faylına useLoaderData hookunu import edəcəyik:

import { Form, useLoaderData } from 'react-router-dom';

Və onu EditProduct funksiyasında yükləyicidən məlumat əldə etmək üçün tətbiq edək. return əmrindən əvvəl onu əlavə edək:

const { product } = useLoaderData();

İndi isə hər bir input teqinə uyğun qiymətlərlə defaultValue atributu əlavə edək. Məsələn, birinci input artıq belə görünəcək:

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

Qalan iki input üçün qiymətlər müvafiq olaraq 'product.cost' və 'product.amount' olacaq. Lakin hələlik formada məlumatlarımız yoxdur.

Əvvəlki dərslərin tapşırıqlarında yaratdığınız proqramı götürün. Dərsin materiallarından istifadə edərək, tələbə məlumatlarının redaktəsi marşrutu üçün edit.jsx faylında loader funksiyası yaradın.

children massivinə redaktə marşrutu üçün obyekt əlavə edin.

EditStudent funksiyanız üçün dərsdə tələb olunan kodu əlavə edin.