Pobieranie danych ładowania na podstawie parametrów URL w React Router

W poprzedniej lekcji napisaliśmy funkcję do pobierania danych strony produktu, zaimportujmy getProduct w pliku product.jsx:

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

Napiszymy funkcję ładowania loader zaraz po imporcie i przed funkcją Product. Przekażmy do niej parametry URL:

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

Również zaimportujmy hook useLoaderData aby użyć danych uzyskanych przez ładowanie:

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

Zastosujmy useLoaderData, odpowiednio zastępując linię z tworzeniem obiektu product na początku funkcji Product na następującą:

const { product } = useLoaderData();

I, oczywiście, zmienimy trochę nasz szablon, ponieważ usunęliśmy stary obiekt product. Zamieńmy zawartość akapitów:

<p>Nazwa: {product.name}</p>
<p>Koszt: {product.cost}</p>
<p>Ilość: {product.amount}</p>

Na następujące:

<p>Nazwa: {product.name ? product.name : <i>bez nazwy</i>}</p>
<p>Koszt: {product.cost ? product.cost : <i>nieznany</i>}</p>
<p>Ilość: {product.amount ? product.amount : <i>nieznana</i>}</p>

Pozostało nam otworzyć main.jsx i dodać tam import loader, nazwijmy go productLoader:

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

I wpisać go jako ładowanie dla obiektu trasy strony z produktem, dodając go do children po właściwości element:

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

To wszystko, z ładowaniem danych dla strony produktu sobie poradziliśmy! Prawda, ładować na razie nie mamy czego. Uruchom aplikację, dodaj kilka produktów i kliknij na nie na liście, żeby się upewnić, że wszystko działa.

Weź aplikację stworzoną przez ciebie w zadaniach do poprzednich lekcji. Korzystając z materiałów lekcji, zaimplementuj loader, podłącz go, wykorzystaj dane z niego dla strony ze studentem.