Получаване на данни от 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 };
}

Също така импортираме хука useLoaderData за използване на данните, получени от loader-а:

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

Нека приложим useLoaderData, като съответно заменим реда със създаването на обекта product в началото на функцията Product със следния:

const { product } = useLoaderData();

И, разбира се, нека променим малко нашия markup, тъй като премахнахме стария обект 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';

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

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

Готово, със зареждането на данни за продуктовата страница се справихме! Вярно, зареждане нямаме засега. Пуснете приложението, добавете продукти и кликнете върху тях в списъка, за да се убедите, че всичко работи.

Вземете приложението, създадено от вас в задачите към предишните уроци. Позовавайки се на материалите от урока, имплементирайте loader, свържете го, използвайте данните от него за страницата със студент.