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

← →
↑