Henting av lastedata etter URL-parametere i React Router

I forrige leksjon skrev vi en funksjon for å hente data for produktsiden, la oss importere getProduct i filen product.jsx:

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

La oss skrive lastingsfunksjonen loader rett etter importen og før funksjonen Product. La oss sende URL-parametrene til den:

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

Importer også hooken useLoaderData for å bruke dataene hentet av lastingsfunksjonen:

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

La oss bruke useLoaderData, og følgelig erstatte linjen med opprettelsen av objektet product i begynnelsen av funksjonen Product med følgende:

const { product } = useLoaderData();

Og, selvfølgelig, la oss endre markupen vår litt, siden vi fjernet det gamle objektet product. La oss erstatte innholdet i avsnittene:

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

Med følgende:

<p>Navn: {product.name ? product.name : <i>uten navn</i>}</p>
<p>Pris: {product.cost ? product.cost : <i>ukjent</i>}</p>
<p>Antall: {product.amount ? product.amount : <i>ukjent</i>}</p>

Det gjenstår for oss å åpne main.jsx og legge til importen av loader der, la oss kalle den productLoader:

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

Og skrive den inn som laster for ruteobjektet til produktsiden, ved å legge den til i children etter egenskapen element:

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

Det er alt, vi har funnet ut av datalasting for produktsiden! Men, foreløpig har vi ingenting å laste. Start applikasjonen, legg til produkter og klikk på dem i listen for å forsikre deg om at alt fungerer.

Ta applikasjonen du opprettet i oppgavene til de foregående leksjonene. Bruk leksjonsmaterialet og implementer loader, koble den til, bruk dataene fra den for siden med studenten.