Pridobivanje podatkov nalagalnika iz URL parametrov v React Router

V prejšnji lekciji smo napisali funkcijo za pridobivanje podatkov strani izdelka, importajmo getProduct v datoteko product.jsx:

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

Napišimo funkcijo nalagalnika loader takoj po importu in pred funkcijo Product. Podajmo ji URL parametre:

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

Prav tako importajmo kavelj useLoaderData za uporabo podatkov, pridobljenih z nalagalnikom:

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

Uporabimo useLoaderData, s čimer zamenjamo vrstico z ustvarjanjem objekta product na začetku funkcije Product z naslednjo:

const { product } = useLoaderData();

In seveda nekoliko spremenimo našo postavitev, saj smo odstranili stari objekt product. Zamenjajmo vsebino odstavkov:

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

Z naslednjo:

<p>Ime: {product.name ? product.name : <i>neimenovano</i>}</p>
<p>Cena: {product.cost ? product.cost : <i>neznana</i>}</p>
<p>Količina: {product.amount ? product.amount : <i>neznana</i>}</p>

Ostane nam še, da odpremo main.jsx in dodamo tja import loader, poimenujmo ga productLoader:

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

In ga navedimo kot nalagalnik za objekt poti strani z izdelkom, dodamo ga v children za lastnostjo element:

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

To je vse, s pridobivanjem podatkov za stran izdelka smo se razrešili! Resda, nimamo še kaj nalagati. Zaženite aplikacijo, dodajte nekaj izdelkov in kliknite nanje v seznamu, da se prepričate, da vse deluje.

Vzemite aplikacijo, ki ste jo ustvarili v nalogah za prejšnje lekcije. Z uporabo gradiva iz lekcije implementirajte loader, povežite ga, uporabite podatke iz njega za stran s študentom.