Получение данных загрузчика по URL параметрам в React Router

На прошлом уроке мы написали функцию для получения данных странички продукта, давайте импортируем 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, подключите его, воспользуйтесь данными из него для страницы со студентом.