React Router да URL параметрлар орқали юклагич маълумотларини олиш

Ўтган дарсда биз маҳсулот саҳифаси учун маълумот олиш функциясини ёзган эдик, келтириб чиқариш қиламиз getProduct файлдан product.jsx:

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

Келтириб чиқаришдан кейин ва функциядан олдин Product юклагич функциясини ёзамиз loader Унга URL параметрларини ўтказамиз:

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

Шунингдек, келтириб чиқариш қиламиз ҳук useLoaderData учун юклагич томонидан олинган маълумотлардан фойдаланиш:

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

Қўллаймиз useLoaderData, мос равишда объект яратиш сатрини алмаштирамиз product функциянинг бошланишида Product бу нarsaga:

const { product } = useLoaderData();

Ва, албатта, бир оз ўзгартирамиз бизнинг верстканимиз, чунки биз эски объектни olib tashladik product. Абзацларнинг мазмунини алмаштирамиз:

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

Бу нarsaga:

<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>

Бизга очиш қолди main.jsx ва унга келтириб чиқариш қўшиш loader, уни номлаймиз productLoader:

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

Ва уни ёзамиз юклагич сифатида маҳсулот саҳифаси учун маршрут объектининг қўшиш уни children ичига хоссадан кейин element:

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

Ҳаммаси, маҳсулот саҳифаси учун маълумотларни юклаш билан ишнимиз тугалди! Лекин, юзлаш учун ҳали ҳеч нарса йўқ. Иловани ишга туширинг, маҳсулотлар қўшинг ва уларни рўйхатда босиб, ҳаммаси ишлашига ишонч ҳосил қилинг.

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