Andmete hankimine laadija kaudu URL-i parameetrite abil React Routeris

Eelmises õppetükis kirjutasime funktsiooni toodete lehe andmete hankimiseks, importime getProduct failis product.jsx:

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

Kirjutame laadija funktsiooni loader kohe pärast importi ja enne funktsiooni Product. Edastame sellele URL-i parameetrid:

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

Samuti importime hook'i useLoaderData laadijast saadud andmete kasutamiseks:

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

Rakendame useLoaderData, asendades vastavalt objekti product loomise rea funktsiooni Product alguses järgmisega:

const { product } = useLoaderData();

Ja muidugi muudame veidi meie välimust, kuna eemaldasime vana objekti product. Asendame lõikude sisu:

<p>Nimi: {product.name}</p>
<p>Hind: {product.cost}</p>
<p>Kogus: {product.amount}</p>

Järgmisega:

<p>Nimi: {product.name ? product.name : <i>nimetu</i>}</p>
<p>Hind: {product.cost ? product.cost : <i>teadmata</i>}</p>
<p>Kogus: {product.amount ? product.amount : <i>teadmata</i>}</p>

Meil jääb üle avada main.jsx ja lisada sinna import loader, nimetame selle productLoader:

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

Ja määrata see laadijaks toodete lehe marsruudi objekti jaoks, lisades selle children omaduse element järele:

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

Kõik, andmete laadimisega toodete lehele saime hakkama! Kuid, meil pole praegu midagi laadida. Käivitage rakendus, lisage tooteid ja klõpsake neile nimekirjas, et veenduda, et kõik töötab.

Võtke rakendus, mille lõite ülesannetes eelmistele õppetundidele. Kasutades õppetunni materjale, rakendage loader, ühendage see, kasutage sealt saadud andmeid üliõpilase lehel.