Hämta laddningsdata från URL-parametrar i React Router

I förra lektionen skrev vi en funktion för att hämta data för produktsidan, låt oss importera getProduct i filen product.jsx:

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

Låt oss skriva laddarfunktionen loader direkt efter importen och före funktionen Product. Låt oss skicka URL-parametrarna till den:

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

Importera också hooken useLoaderData för att använda data som erhållits av laddaren:

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

Låt oss använda useLoaderData, och följaktligen ersätta raden med skapandet av objektet product i början av funktionen Product med följande:

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

Och, naturligtvis, låt oss ändra vår markup lite, eftersom vi tog bort det gamla objektet product. Låt oss ersätta innehållet i styckena:

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

Med följande:

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>

Vi har kvar att öppna main.jsx och lägga till import av loader där, låt oss kalla den productLoader:

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

Och specificera den som laddare för route-objektet för produktsidan, genom att lägga till den i children efter egenskapen element:

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

Klart, vi har löst dataladdningen för produktsidan! Fastän, vi har ingenting att ladda ännu. Starta applikationen, lägg till produkter och klicka på dem i listan för att verifiera att allt fungerar.