Recupero dei dati del loader tramite parametri URL in React Router

Nella lezione precedente abbiamo scritto una funzione per recuperare i dati della pagina del prodotto, importiamo getProduct nel file product.jsx:

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

Scriviamo la funzione del loader loader subito dopo l'import e prima della funzione Product. Passiamole i parametri URL:

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

Importiamo anche l'hook useLoaderData per utilizzare i dati ottenuti dal loader:

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

Applichiamo useLoaderData, sostituendo di conseguenza la riga con la creazione dell'oggetto product all'inizio della funzione Product con la seguente:

const { product } = useLoaderData();

E, naturalmente, modificheremo leggermente il nostro markup, poiché abbiamo rimosso il vecchio oggetto product. Sostituiamo il contenuto dei paragrafi:

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Con il seguente:

<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

Ci resta di aprire main.jsx e aggiungere l'import di loader, chiamiamolo productLoader:

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

E specificarlo come loader per l'oggetto della route della pagina del prodotto, aggiungendolo in children dopo la proprietà element:

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

Tutto fatto, abbiamo sistemato il caricamento dei dati per la pagina del prodotto! Però, non abbiamo ancora niente da caricare. Avvia l'applicazione, aggiungi alcuni prodotti e clicca su di essi nella lista per assicurarti che tutto funzioni.

Prendi l'applicazione che hai creato nei compiti delle lezioni precedenti. Utilizzando il materiale della lezione, implementa il loader, collegalo, utilizza i dati da esso per la pagina dello studente.