Obținerea datelor din încărcător pe baza parametrilor URL în React Router

În lecția precedentă am scris o funcție pentru obținerea datelor paginii de produs, haideți să importăm getProduct în fișierul product.jsx:

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

Să scriem funcția încărcătorului loader imediat după import și înainte de funcția Product. Să-i transmitem parametrii URL:

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

De asemenea, să importăm hook-ul useLoaderData pentru utilizarea datelor obținute de încărcător:

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

Să aplicăm useLoaderData, în consecință înlocuind linia cu crearea obiectului product la începutul funcției Product cu următoarea:

const { product } = useLoaderData();

Și, desigur, să modificăm puțin markdown-ul nostru, deoarece am eliminat vechiul obiect product. Să înlocuim conținutul paragrafelor:

<p>Nume: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Cantitate: {product.amount}</p>

Cu următorul:

<p>Nume: {product.name ? product.name : <i>fără nume</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>necunoscut</i>}</p>
<p>Cantitate: {product.amount ? product.amount : <i>necunoscută</i>}</p>

Ne rămâne să deschidem main.jsx și să adăugăm acolo importul loader, să-l numim productLoader:

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

Și să-l specificăm ca încărcător pentru obiectul rutei paginii cu produsul, adăugându-l în children după proprietatea element:

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

Gata, am rezolvat încărcarea datelor pentru pagina de produs! Adevărat, momentan nu avem ce încărca. Porniți aplicația, adăugați câteva produse și dați click pe ele în listă, pentru a vă asigura că totul funcționează.

Luați aplicația creată de dvs. în sarcinile din lecțiile anterioare. Folosind materialele lecției, implementați loader, conectați-l, folosiți datele din el pentru pagina cu student.