Marrja e të Dhënave të Loader-it sipas Parametrave të URL-it në React Router

Në mësimin e kaluar ne shkruajtëm një funksion për marrjen e të dhënave të faqes së produktit, le të importojmë getProduct në skedarin product.jsx:

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

Le të shkruajmë funksionin e loader-it loader menjëherë pas importit dhe përpara funksionit Product. Le t'i kalojmë atij parametrat e URL-it:

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

Gjithashtu le të importojmë hook-un useLoaderData për të përdorur të dhënat e marra nga loader-i:

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

Le të aplikojmë useLoaderData, në përputhje me rrethanat duke zëvendësuar rreshtin me krijimin e objektit product në fillim të funksionit Product me këtë:

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

Dhe, sigurisht, le të ndryshojmë pak markup-in tonë, pasi hoqëm objektin e vjetër product. Le të zëvendësojmë përmbajtjen e paragrafëve:

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

Me këtë:

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>

Na mbetet të hapim main.jsx dhe të shtojmë atje importin e loader, le ta quajmë atë productLoader:

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

Dhe ta shënojmë atë si loader për objektin e rrugës së faqes së produktit, duke e shtuar në children pas property-t element:

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

Kaq, jemi marrë me ngarkimin e të dhënave për faqen e produktit! E vërteta është, nuk kemi ende asgjë për të ngarkuar. Nisni aplikacionin, shtoni disa produkte dhe klikoni mbi to në listë, për të u siguruar që gjithçka funksionon.