React Routerda ma'lumotlarni tahrirlash uchun marshrut yaratish

O'tgan darsda biz alohida React komponentida EditProduct tahrirlash shaklini yaratdik.

Keling, endi importlardan keyin va EditProduct funksiyasidan oldin yangi marshrut uchun yuklovchi funksiyani yozamiz. U product.jsx dagi kabi bo'ladi. Funksiyaga URL parametrlari o'tkaziladi va keyin biz mahsulotni uning id si orqali olamiz:

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

getProduct ni forStorage.js dan import qilamiz:

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

Endi biz main.jsx ni ochamiz va yaratgan EditProduct komponentimizni va yuklovchini import qilamiz:

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

Keyin children massivida mahsulot marshrutidan keyin darhol tahrirlash uchun marshrut ob'ektini qo'shamiz:

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

Endi ilovani ishga tushiramiz, mahsulot yaratamiz, unga bosamiz, so'ngra tahrirlash tugmachasiga bosamiz va shaklichamizni ko'ramiz.

Yagona narsa, shakl maydonlarida tahrirlashdan oldin joriy ma'lumotlar yuklanganligiga ishonch hosil qilishimiz kerak. Buning uchun biz edit.jsx da useLoaderData hookini import qilamiz:

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

Va uni EditProduct funksiyasida yuklovchidan ma'lumot olish uchun qo'llaymiz. Uni return dan oldin qo'shamiz:

const { product } = useLoaderData();

Endi har bir input tegiga mos keladigan qiymatlar bilan defaultValue atributini qo'shamiz. Masalan, birinchi input endi shunday ko'rinadi:

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

Qolgan ikkita input uchun qiymatlar mos ravishda 'product.cost' va 'product.amount' bo'ladi. Lekin hali shaklda ma'lumotlar yo'q.

Oldingi darslar uchun topshiriqlarda yaratgan ilovangizni oling. Dars materiallaridan foydalanib, talaba ma'lumotlarini tahrirlash marshruti uchun edit.jsx da loader funksiyasini yarating.

children massiviga tahrirlash uchun marshrut ob'ektini qo'shing.

EditStudent funksiyangiz uchun darsda talab qilingan kodni qo'shing.