Dobijanje podataka loader-a preko URL parametara u React Router-u

U prethodnoj lekciji napisali smo funkciju za dobijanje podataka stranice proizvoda, hajde da importujemo getProduct u fajlu product.jsx:

import { getProduct } from '../forStorage';

Napišimo funkciju loader-a loader odmah nakon importa i pre funkcije Product. Prosledimo joj URL parametre:

export async function loader({ params }) {
	const product = await getProduct(params.productId);
	return { product };
}

Takođe, importujmo hook useLoaderData za korišćenje podataka dobijenih loader-om:

import { useLoaderData } from 'react-router-dom';

Primenimo useLoaderData, shodno tome zamenivši liniju sa kreiranjem objekta product na početku funkcije Product sledećom:

const { product } = useLoaderData();

I, naravno, promenićemo malo naš markup, pošto smo uklonili stari objekat product. Zamenimo sadržaj paragrafa:

<p>Naziv: {product.name}</p>
<p>Cena: {product.cost}</p>
<p>Količina: {product.amount}</p>

Sledećim:

<p>Naziv: {product.name ? product.name : <i>bez imena</i>}</p>
<p>Cena: {product.cost ? product.cost : <i>nepoznata</i>}</p>
<p>Količina: {product.amount ? product.amount : <i>nepoznata</i>}</p>

Ostaje nam da otvorimo main.jsx i tamo dodamo import loader, nazvaćemo ga productLoader:

import Product, {
	loader as productLoader,
} from './routes/product';

I da ga definišemo kao loader za objekat rute stranice sa proizvodom, dodavši ga u children nakon svojstva element:

children: [
	{
		path: 'products/:productId',
		element: <Product />,
		loader: productLoader,
	},
],

To je sve, sa učitavanjem podataka za stranicu proizvoda smo završili! Istina, nemamo šta da učitamo. Pokrenite aplikaciju, dodajte nekoliko proizvoda i kliknite na njih u listi, kako biste se uverili da sve funkcioniše.

Uzmite aplikaciju koju ste kreirali u zadacima za prethodne lekcije. Koristeći materijale lekcije, implementirajte loader, povežite ga, iskoristite podatke iz njega za stranicu sa studentom.