React Router'де URL параметрлери боюнча жүктөөчү маалыматтарын алуу

Акыркы сабакта биз продукт баракчасынын маалыматтарын алуу үчүн функция жаздык, келгиле файлдагы product.jsx импорт кылалы getProduct:

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 объектин түзгөн сапты төмөнкү менен алмаштырабыз:

const { product } = useLoaderData();

Жана, албетте, биз эски product объектин жок кылганыбыз үчүн, версткабызды бир аз өзгөртөбүз. Абзацтардын мазмунун алмаштырабыз:

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

Төмөнкүгө:

<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 ишке ашырыңыз, аны туташтырыңыз, студент баракчасы үчүн андагы маалыматтарды пайдаланыңыз.