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:

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

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

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

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

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

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

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

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

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

Kwa yafuatayo:

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

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

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