React Router-ում URL պարամետրերով լոադերի տվյալների ստացում

Նախորդ դասում մենք գրեցինք ֆունկցիա ապրանքի էջի տվյալները ստանալու համար, եկեք իմպորտենք getProduct product.jsx ֆայլում՝

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

Գրենք loader լոադերի ֆունկցիան իմպորտից անմիջապես հետո և Product ֆունկցիայից առաջ։ Փոխանցենք դրան 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-ը, միացրեք այն, օգտագործեք դրանից ստացված տվյալները ուսանողի էջի համար։