Die Verkryging van Laaier Data vanaf URL Parameters in React Router

In die vorige les het ons 'n funksie geskryf om data vir die produkbladsy te verkry, laat ons getProduct in die lêer product.jsx invoer:

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

Laat ons die laaierfunksie loader skryf direk na die invoer en voor die funksie Product. Laat ons die URL parameters daaraan oordra:

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

Laat ons ook die hook useLoaderData invoer vir die gebruik van data wat deur die laaier verkry is:

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

Laat ons useLoaderData toepas, en dus die lyn wat die objek product skep aan die begin van die funksie Product vervang met die volgende:

const { product } = useLoaderData();

En, natuurlik, laat ons ons opmaak 'n bietjie verander, aangesien ons die ou objek product verwyder het. Laat ons die inhoud van die paragrawe vervang:

<p>Naam: {product.name}</p>
<p>Koste: {product.cost}</p>
<p>Hoeveelheid: {product.amount}</p>

Met die volgende:

<p>Naam: {product.name ? product.name : <i>naamloses</i>}</p>
<p>Koste: {product.cost ? product.cost : <i>onbekend</i>}</p>
<p>Hoeveelheid: {product.amount ? product.amount : <i>onbekend</i>}</p>

Ons moet net main.jsx oopmaak en die invoer van loader daar byvoeg, kom ons noem dit productLoader:

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

En om dit as die laaier te spesifiseer vir die roete-objek van die produkbladsy, deur dit by te voeg in children na die eienskap element:

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

Dit is alles, ons het die laai van data vir die produkbladsy uitgepluis! Alhoewel, ons het niks om te laai nie. Begin die toepassing, voeg produkte by en klik op hulle in die lys om seker te maak alles werk.

Neem die toepassing wat jy in die take van vorige lesse geskep het. Gebruik die lesmateriaal, implementeer die loader, koppel dit, en gebruik die data daarvan vir die studentbladsy.