Kupata Data za Loader Kulingana na Vigezo vya URL katika React Router

Katika somo lililopita tuliandika kitendo cha kupata data za ukurasa wa bidhaa, hebu tuimporte getProduct kwenye faili product.jsx:

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

Tuandike kitendo cha loader loader mara baada ya import na kabla ya kitendo Product. Tupitishe ndani yake vigezo vya URL :

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

Pia tuimporte kutumia useLoaderData kwa matumizi ya data, zilizopatikana kwa loader:

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

Tutumie useLoaderData, ipasavyo tukibadilisha mstari na uundaji wa kitu product mwanzoni mwa kitendo Product na ufuatao:

const { product } = useLoaderData();

Na, bila shaka, tubadilishe kidogo muundo wetu, kwa sababu tuliondoa kitu cha zamani product. Tubadilishe yaliyomo kwenye aya:

<p>Jina: {product.name}</p>
<p>Gharama: {product.cost}</p>
<p>Kiasi: {product.amount}</p>

Kwa yafuatayo:

<p>Jina: {product.name ? product.name : <i>haina jina</i>}</p>
<p>Gharama: {product.cost ? product.cost : <i>haijulikani</i>}</p>
<p>Kiasi: {product.amount ? product.amount : <i>haijulikani</i>}</p>

Imetubakia kufungua main.jsx na kuongeza humo import loader, tuiite productLoader:

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

Na kuandika kama loader kwa kitu cha njia za ukurasa na bidhaa, kuongeza kwenye children baada ya sifa element:

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

Yote, na upakiaji wa data kwa ukurasa wa bidhaa tumemaliza! Kweli, tunaweza kupakia bado hakuna chochote. Zindua programu, ongeza bidhaa na ubofye kwenye orodha, ili kuhakikisha kuwa yote inafanya kazi.

Chukua programu, iliyoundwa na wewe kwa kazi za masomo yaliyopita. Kwa kutumia nyenzo za somo, kutekeleza loader, kuunganisha, kutumia data kutoka humo kwa ukurasa na mwanafunzi.