Добијање података учитавача преко 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, повежите га, искористите податке из њега за страницу са студентом.