Įkėlimo duomenų gavimas iš URL parametrų React Router

Ankstesnėje pamokoje parašėme funkciją produkto puslapio duomenų gavimui, importuokime getProduct failą product.jsx:

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

Parašykime įkėlimo funkciją loader iškart po importo ir prieš funkciją Product. Perduokime jai URL parametrus:

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

Taip pat importuokime hook'ą useLoaderData, kad naudotume įkėlimo gautus duomenis:

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

Pritaikykime useLoaderData, atitinkamai pakeisdami eilutę su objekto product sukūrimu funkcijos Product pradžioje šiuo kodu:

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

Ir, žinoma, šiek tiek pakeisime savo žymėjimą, nes pašalinome senąjį objekto product. Pakeiskime pastraipų turinį:

routes/product.jsx<p>Pavadinimas: {product.name}</p>
<p>Kaina: {product.cost}</p>
<p>Kiekis: {product.amount}</p>

Šiuo kodu:

routes/product.jsx<p>Pavadinimas: {product.name ? product.name : <i>be pavadinimo</i>}</p>
<p>Kaina: {product.cost ? product.cost : <i>nežinoma</i>}</p>
<p>Kiekis: {product.amount ? product.amount : <i>nežinoma</i>}</p>

Mums belieka atidaryti main.jsx ir pridėti ten importą loader, pavadinkime jį productLoader:

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

Ir nurodyti jį kaip įkėlimo funkciją produkto puslapio maršruto objektui, pridėdami jį į children po savybės element:

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

Viskas, su duomenų įkėlimu produkto puslapiui susidorojome! Tiesa, kol kas nėra ką įkelti. Paleiskite programėlę, pridėkite produktų ir spustelėkite juos sąraše, kad įsitikintumėte, jog viskas veikia.