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:

routes/product.jsximport { getProduct } from '../forStorage';

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

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

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

routes/product.jsximport { 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:

routes/product.jsxconst { product } = useLoaderData();

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

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

Con il seguente:

routes/product.jsx<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:

main.jsximport 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:

main.jsxchildren: [
  {
    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.