React Router-da URL Parametrleri ile Yükleyici Melumatlarının Alınması

Keçən dersde məhsul səhifesinin melumatlarını almaq üçün funksiya yazmışdıq, gəlin getProduct funksiyasını product.jsx faylına import edək:

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

Importdan dərhal sonra və Product funksiyasından əvvəl loader yükleyici funksiyasını yazaq. Ona URL parametrlərini ötürək:

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

Həmçinin, yükleyici tərəfindən alınan melumatlardan istifadə etmək üçün useLoaderData hookunu import edək:

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

useLoaderData-ı tətbiq edək, müvafiq olaraq Product funksiyasının əvvəlində product obyektinin yaradılması sətrini aşağıdakı ilə əvəz edək:

const { product } = useLoaderData();

Və, əlbəttə ki, köhnə product obyektini sildiyimiz üçün bizim çəkilişimizi bir az dəyişəcəyik. Abzasların məzmununu əvəz edək:

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

Aşağıdakı ilə:

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

Bizə main.jsx-ı açıb ora loader import etmək qalır, onu productLoader adlandıraq:

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

Və onu məhsul səhifəsinin marşrut obyekti üçün yükleyici kimi qeyd edək, onu children-ın içində element xassəsindən sonra əlavə edək:

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

Hamısı, məhsul səhifəsi üçün melumatların yüklənməsi ilə işimiz bitdi! Doğrusu, hələlik yükləyəcək bir şeyimiz yoxdur. Tətbiqi işə salın, məhsullar əlavə edin və hər şeyin işlədiyinə əmin olmaq üçün siyahıda onlara klikləyin.

Əvvəlki derslərin tapşırıqlarında yaratdığınız tətbiqi götürün. Dərs materiallarından istifadə edərək, loader-ı həyata keçirin, onu qoşun və tələbə səhifəsi üçün ondan alınan melumatlardan istifadə edin.