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