Získavanie údajov z načítača podľa URL parametrov v React Router

V predchádzajúcej lekcii sme napísali funkciu pre získanie údajov stránky produktu, importujme getProduct v súbore product.jsx:

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

Napíšme funkciu načítača loader ihneď po importe a pred funkciou Product. Odovzdajme do nej URL parametre:

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

Tiež importujme hook useLoaderData pre použitie údajov získaných načítačom:

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

Aplikujme useLoaderData, zodpovedajúcim spôsobom nahradíme riadok s vytvorením objektu product na začiatku funkcie Product nasledujúcim:

const { product } = useLoaderData();

A, samozrejme, trochu zmeníme našu verziu, pretože sme odstránili starý objekt product. Nahraďme obsah odsekov:

<p>Názov: {product.name}</p>
<p>Cena: {product.cost}</p>
<p>Množstvo: {product.amount}</p>

Nasledujúcim:

<p>Názov: {product.name ? product.name : <i>nepomenovaný</i>}</p>
<p>Cena: {product.cost ? product.cost : <i>neznáma</i>}</p>
<p>Množstvo: {product.amount ? product.amount : <i>neznáme</i>}</p>

Zostáva nám otvoriť main.jsx a pridať tam import loader, nazvime ho productLoader:

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

A zapísať ho ako načítač pre objekt trasy stránky s produktom, pridaním do children po vlastnosti element:

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

To je všetko, so načítaním údajov pre stránku produktu sme sa vyrovnali! Pravda, načítavať zatiaľ nemáme čo. Spustite aplikáciu, pridajte produkty a klikajte na ne v zozname, aby ste sa presvedčili, že všetko funguje.

Vezmite aplikáciu vytvorenú vami v úlohách k predchádzajúcim lekciám. Použitím materiálov z lekcie implementujte loader, pripojte ho, použite údaje z neho pre stránku so študentom.