Marrja e të Dhënave të Loader-it sipas Parametrave të URL-it në React Router

Në mësimin e kaluar ne shkruajtëm një funksion për marrjen e të dhënave të faqes së produktit, le të importojmë getProduct në skedarin product.jsx:

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

Le të shkruajmë funksionin e loader-it loader menjëherë pas importit dhe përpara funksionit Product. Le t'i kalojmë atij parametrat e URL-it:

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

Gjithashtu le të importojmë hook-un useLoaderData për të përdorur të dhënat e marra nga loader-i:

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

Le të aplikojmë useLoaderData, në përputhje me rrethanat duke zëvendësuar rreshtin me krijimin e objektit product në fillim të funksionit Product me këtë:

const { product } = useLoaderData();

Dhe, sigurisht, le të ndryshojmë pak markup-in tonë, pasi hoqëm objektin e vjetër product. Le të zëvendësojmë përmbajtjen e paragrafëve:

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

Me këtë:

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

Na mbetet të hapim main.jsx dhe të shtojmë atje importin e loader, le ta quajmë atë productLoader:

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

Dhe ta shënojmë atë si loader për objektin e rrugës së faqes së produktit, duke e shtuar në children pas property-t element:

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

Kaq, jemi marrë me ngarkimin e të dhënave për faqen e produktit! E vërteta është, nuk kemi ende asgjë për të ngarkuar. Nisni aplikacionin, shtoni disa produkte dhe klikoni mbi to në listë, për të u siguruar që gjithçka funksionon.

Merrni aplikacionin e krijuar nga ju në detyrat e mësimeve të kaluara. Duke përdorur materialet e mësimit, implementoni loader, lidheni atë, përdorni të dhënat prej tij për faqen me studentin.