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