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:

import { 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:

export 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:

import { 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:

const { 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:

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

Med följande:

<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:

import 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:

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

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd lektionens material, implementera loader, anslut den, använd data från den för sidan med studenten.