React Router'da URL parametrlari orqali yuklovchi ma'lumotlarini olish

O'tgan darsda biz mahsulot sahifasi ma'lumotlarini olish uchun funktsiya yozgan edik, keling getProduct ni product.jsx faylida import qilaylik:

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

Keling, importdan keyin va Product funktsiyasidan oldin loader yuklovchi funktsiyasini yozamiz. Unga URL parametrlarini uzatamiz:

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

Shuningdek, yuklovchi tomonidan olingan ma'lumotlardan foydalanish uchun useLoaderData hook'ini import qilamiz:

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

useLoaderData ni qo'llaymiz, shunga mos ravishda Product funktsiyasining boshidagi product obyektini yaratish qatorini quyidagiga almashtiramiz:

const { product } = useLoaderData();

Va, albatta, bizning verstkamizni biroz o'zgartiramiz, chunki biz eski obyekt product ni olib tashladik. Abzatslarning mazmunini almashtiramiz:

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Quyidagiga:

<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

Bizga main.jsx ni ochib, unga loader ni import qilish qoldi, uni productLoader deb nomlaymiz:

import Product, {
	loader as productLoader,
} from './routes/product';

Va uni mahsulot sahifasi marshrut obyekti uchun yuklovchi sifatida belgilash qoldi, uni children ga element xususiyatidan keyin qo'shamiz:

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

Hammasi, mahsulot sahifasi ma'lumotlarini yuklash bilan ishimiz tugadi! Rostini aytsak, hozircha yuklash uchun hech narsa yo'q. Ilovani ishg'a tushiring, mahsulotlar qo'shing va hamma narsa ishlayotganiga ishonch hosil qilish uchun ro'yxatdagi mahsulotlarni bosing.

Oldingi darslar mashqlarida yaratgan ilovangizni oling. Dars materiallaridan foydalanib, talaba sahifasi uchun loader ni amalga oshiring, ulang va undan olingan ma'lumotlardan foydalaning.