Ophalen van laadprogrammagegevens via URL-parameters in React Router

In de vorige les hebben we een functie geschreven voor het ophalen van gegevens van de productpagina, laten we getProduct importeren in het bestand product.jsx:

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

Laten we de laadprogrammafunctie loader schrijven direct na de import en vóór de functie Product. Laten we de URL-parameters doorgeven:

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

Importeer ook de hook useLoaderData voor het gebruik van gegevens die door het laadprogramma zijn verkregen:

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

Laten we useLoaderData toepassen, en dienovereenkomstig de regel met het aanmaken van het object product aan het begin van de functie Product vervangen door het volgende:

const { product } = useLoaderData();

En natuurlijk passen we onze opmaak een beetje aan, omdat we het oude object product hebben verwijderd. Laten we de inhoud van de paragrafen vervangen:

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

Door het volgende:

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

We hoeven alleen nog main.jsx te openen en daar de import van loader toe te voegen, laten we het productLoader noemen:

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

En het te registreren als laadprogramma voor het route-object van de productpagina, door het toe te voegen aan children na de eigenschap element:

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

Klaar, we hebben het ophalen van gegevens voor de productpagina afgerond! Alleen, er is nog niets om te laden. Start de applicatie, voeg producten toe en klik erop in de lijst om te controleren of alles werkt.

Neem de applicatie die je hebt gemaakt in opdrachten bij eerdere lessen. Gebruikmakend van de lesmaterialen, implementeer een loader, sluit deze aan, gebruik de gegevens ervan voor de pagina van een student.