Obținerea datelor din încărcător pe baza parametrilor URL în React Router

În lecția precedentă am scris o funcție pentru obținerea datelor paginii de produs, haideți să importăm getProduct în fișierul product.jsx:

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

Să scriem funcția încărcătorului loader imediat după import și înainte de funcția Product. Să-i transmitem parametrii URL:

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

De asemenea, să importăm hook-ul useLoaderData pentru utilizarea datelor obținute de încărcător:

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

Să aplicăm useLoaderData, în consecință înlocuind linia cu crearea obiectului product la începutul funcției Product cu următoarea:

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

Și, desigur, să modificăm puțin markdown-ul nostru, deoarece am eliminat vechiul obiect product. Să înlocuim conținutul paragrafelor:

routes/product.jsx<p>Nume: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Cantitate: {product.amount}</p>

Cu următorul:

routes/product.jsx<p>Nume: {product.name ? product.name : <i>fără nume</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>necunoscut</i>}</p>
<p>Cantitate: {product.amount ? product.amount : <i>necunoscută</i>}</p>

Ne rămâne să deschidem main.jsx și să adăugăm acolo importul loader, să-l numim productLoader:

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

Și să-l specificăm ca încărcător pentru obiectul rutei paginii cu produsul, adăugându-l în children după proprietatea element:

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

Gata, am rezolvat încărcarea datelor pentru pagina de produs! Adevărat, momentan nu avem ce încărca. Porniți aplicația, adăugați câteva produse și dați click pe ele în listă, pentru a vă asigura că totul funcționează.