Andmete hankimine laadija kaudu URL-i parameetrite abil React Routeris

Eelmises õppetükis kirjutasime funktsiooni toodete lehe andmete hankimiseks, importime getProduct failis product.jsx:

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

Kirjutame laadija funktsiooni loader kohe pärast importi ja enne funktsiooni Product. Edastame sellele URL-i parameetrid:

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

Samuti importime hook'i useLoaderData laadijast saadud andmete kasutamiseks:

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

Rakendame useLoaderData, asendades vastavalt objekti product loomise rea funktsiooni Product alguses järgmisega:

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

Ja muidugi muudame veidi meie välimust, kuna eemaldasime vana objekti product. Asendame lõikude sisu:

routes/product.jsx<p>Nimi: {product.name}</p>
<p>Hind: {product.cost}</p>
<p>Kogus: {product.amount}</p>

Järgmisega:

routes/product.jsx<p>Nimi: {product.name ? product.name : <i>nimetu</i>}</p>
<p>Hind: {product.cost ? product.cost : <i>teadmata</i>}</p>
<p>Kogus: {product.amount ? product.amount : <i>teadmata</i>}</p>

Meil jääb üle avada main.jsx ja lisada sinna import loader, nimetame selle productLoader:

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

Ja määrata see laadijaks toodete lehe marsruudi objekti jaoks, lisades selle children omaduse element järele:

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

Kõik, andmete laadimisega toodete lehele saime hakkama! Kuid, meil pole praegu midagi laadida. Käivitage rakendus, lisage tooteid ja klõpsake neile nimekirjas, et veenduda, et kõik töötab.