Добивање на податоци од loader преку URL параметри во React Router

Во претходната лекција напишавме функција за добивање на податоци за страницата на производот, ајде да ја импортираме getProduct во датотеката product.jsx:

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

Да напишеме loader функција loader веднаш по импортот и пред функцијата Product. Да ги пренесеме URL параметрите во неа:

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

Исто така, да го импортираме hook-от useLoaderData за користење на податоците добиени од loader-от:

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

Да го примениме useLoaderData, соодветно заменувајќи ја линијата со креирање на објектот product на почетокот на функцијата Product со следнава:

const { product } = useLoaderData();

И, се разбира, да ја смениме малку нашата разработка, бидејќи го отстранивме стариот објект product. Да ги замениме содржините на параграфите:

<p>Име: {product.name}</p>
<p>Цена: {product.cost}</p>
<p>Количина: {product.amount}</p>

Со следново:

<p>Име: {product.name ? product.name : <i>без име</i>}</p>
<p>Цена: {product.cost ? product.cost : <i>непозната</i>}</p>
<p>Количина: {product.amount ? product.amount : <i>непозната</i>}</p>

Останува да ја отвориме main.jsx и да го додадеме импортот на loader, да го наречеме productLoader:

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

И да го пропишеме како loader за објектот на рутата на страницата со производот, додавајќи го во children после својството element:

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

Сè, со вчитувањето на податоци за страницата на производот се справивме! Сепак, немаме што да вчитаме. Стартувајте ја апликацијата, додадете производи и кликнете на нив во листата за да се уверите дека сè работи.

Земете ја апликацијата што ја креиравте во задачите од претходните лекции. Користејќи ги материјалите од лекцијата, имплементирајте loader, поврзете го, искористете ги податоците од него за страницата со студентот.