Hent loader-data via URL-parametre i React Router

I den forrige lektion skrev vi en funktion til at hente data for produktsiden, lad os importere getProduct i filen product.jsx:

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

Lad os skrive loader-funktionen loader umiddelbart efter importen og før funktionen Product. Vi sender URL-parametrene til den:

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

Importer også hook'et useLoaderData for at bruge de data, som loaderen har hentet:

routes/product.jsximport { useLoaderData } from 'react-router-dom';

Lad os anvende useLoaderData og dermed erstatte linjen med oprettelsen af objektet product i starten af funktionen Product med følgende:

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

Og selvfølgelig skal vi ændre lidt på vores opmærkning, da vi har fjernet det gamle objekt product. Lad os erstatte indholdet af afsnittene:

routes/product.jsx<p>Navn: {product.name}</p>
<p>Pris: {product.cost}</p>
<p>Antal: {product.amount}</p>

Med følgende:

routes/product.jsx<p>Navn: {product.name ? product.name : <i>unnavngivet</i>}</p>
<p>Pris: {product.cost ? product.cost : <i>ukendt</i>}</p>
<p>Antal: {product.amount ? product.amount : <i>ukendt</i>}</p>

Tilbage står det at åbne main.jsx og tilføje importen af loader der, lad os kalde den productLoader:

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

Og angive den som loader for ruteobjektet for produktsiden ved at tilføje den i children efter egenskaben element:

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

Det er alt – vi har styr på dataindlæsning for produktsiden! Dog har vi intet at hente endnu. Start applikationen, tilføj produkter og klik på dem på listen for at sikre dig, at alt fungerer.