Hent loader-data via URL-parametre i React Router

I den forrige lektion skrev vi en funktion til at hente data for produktsiden, lad os importere getProduct i filen product.jsx:

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

Lad os skrive loader-funktionen loader umiddelbart efter importen og før funktionen Product. Vi sender URL-parametrene til den:

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

Importer også hook'et useLoaderData for at bruge de data, som loaderen har hentet:

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

Lad os anvende useLoaderData og dermed erstatte linjen med oprettelsen af objektet product i starten af funktionen Product med følgende:

const { product } = useLoaderData();

Og selvfølgelig skal vi ændre lidt på vores opmærkning, da vi har fjernet det gamle objekt product. Lad os erstatte indholdet af afsnittene:

<p>Navn: {product.name}</p>
<p>Pris: {product.cost}</p>
<p>Antal: {product.amount}</p>

Med følgende:

<p>Navn: {product.name ? product.name : <i>unnavngivet</i>}</p>
<p>Pris: {product.cost ? product.cost : <i>ukendt</i>}</p>
<p>Antal: {product.amount ? product.amount : <i>ukendt</i>}</p>

Tilbage står det at åbne main.jsx og tilføje importen af loader der, lad os kalde den productLoader:

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

Og angive den som loader for ruteobjektet for produktsiden ved at tilføje den i children efter egenskaben element:

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

Det er alt – vi har styr på dataindlæsning for produktsiden! Dog har vi intet at hente endnu. Start applikationen, tilføj produkter og klik på dem på listen for at sikre dig, at alt fungerer.

Tag den applikation, du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen til at implementere loader, tilslut den, og brug dataene fra den til siden med studerende.