Získání dat z loaderu pomocí URL parametrů v React Router

V minulé lekci jsme napsali funkci pro načtení dat stránky produktu, importujme getProduct v souboru product.jsx:

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

Napišme funkci loaderu loader hned po importu a před funkcí Product. Předáme jí URL parametry:

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

Také importujme hook useLoaderData pro použití dat získaných loaderem:

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

Aplikujme useLoaderData, podle toho nahraďme řádek s vytvořením objektu product na začátku funkce Product následujícím:

const { product } = useLoaderData();

A samozřejmě trochu upravíme náš HTML, protože jsme odstranili starý objekt product. Nahraďme obsah odstavců:

<p>Název: {product.name}</p>
<p>Cena: {product.cost}</p>
<p>Množství: {product.amount}</p>

Následujícím:

<p>Název: {product.name ? product.name : <i>nepojmenovaný</i>}</p>
<p>Cena: {product.cost ? product.cost : <i>neznámá</i>}</p>
<p>Množství: {product.amount ? product.amount : <i>neznámé</i>}</p>

Zbývá nám otevřít main.jsx a přidat tam import loader, pojmenujme ho productLoader:

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

A zapsat jej jako loader pro objekt trasy stránky s produktem, přidáním do children za vlastnost element:

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

Hotovo, s načítáním dat pro stránku produktu jsme si poradili! Pravda, zatím nemáme co načítat. Spusťte aplikaci, přidejte produkty a klikejte na ně v seznamu, abyste se ujistili, že vše funguje.

Vezměte aplikaci, kterou jste vytvořili v úkolech k minulým lekcím. S využitím materiálů lekce implementujte loader, připojte jej, použijte data z něj pro stránku se studentem.