Adatok betöltése URL paraméterek alapján a React Router loader segítségével

Az előző leckében írtunk egy függvényt a termékoldal adatainak lekéréséhez, importáljuk a getProduct függvényt a product.jsx fájlba:

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

Írjuk meg a loader függvényt az import után, de a Product függvény előtt. Adjuk át neki az URL paramétereket:

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

Importáljuk a useLoaderData hookot is a loader által visszaadott adatok használatához:

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

Alkalmazzuk a useLoaderData hookot, ennek megfelelően lecserélve a product objektum létrehozását a Product függvény elején a következőre:

const { product } = useLoaderData();

És természetesen kicsit módosítanunk kell a markup-ot, mivel eltávolítottuk a régi product objektumot. Cseréljük le a bekezdések tartalmát:

<p>Név: {product.name}</p>
<p>Ár: {product.cost}</p>
<p>Mennyiség: {product.amount}</p>

A következőre:

<p>Név: {product.name ? product.name : <i>névtelen</i>}</p>
<p>Ár: {product.cost ? product.cost : <i>ismeretlen</i>}</p>
<p>Mennyiség: {product.amount ? product.amount : <i>ismeretlen</i>}</p>

Már csak a main.jsx megnyitása van hátra és a loader importálása, nevezzük el productLoader-nek:

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

És be kell állítanunk loader-ként a termékoldal útválasztói objektumában, hozzáadva a children-hez a element property után:

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

Ennyi, a termékoldal adatainak betöltését sikerült megoldanunk! Igaz, jelenleg nincs mit betöltenünk. Indítsd el az alkalmazást, adj hozzá termékeket és kattintsgass rajtuk a listában, hogy megbizonyosodj minden működik.

Vedd azt az alkalmazást, amit az előző leckékhez tartozó feladatokban készítettél. A lecke anyagát felhasználva valósítsd meg a loader függvényt, kapcsold be, és használd fel az általa szolgáltatott adatokat a diák adatlapján.