Lataustietojen hakeminen URL-parametreilla React Routerissa

Edellisellä oppitunnilla kirjoitimme funktion tuotesivun tietojen hakemiseksi, tuodaan getProduct tiedostoon product.jsx:

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

Kirjoitetaan lataajafunktio loader välittömästi tuonnin jälkeen ja ennen funktiota Product. Annetaan sille URL parametrit:

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

Tuo myös hook useLoaderData lataajasta saatavien tietojen käyttämiseksi:

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

Sovelletaan useLoaderData, ja vastaavasti korvataan rivi, joka luo objektin product funktion Product alussa, seuraavalla:

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

Ja tietysti muutetaan hieman HTML-rakenne, koska poistimme vanhan objektin product. Korvataan kappaleiden sisältö:

routes/product.jsx<p>Nimi: {product.name}</p>
<p>Hinta: {product.cost}</p>
<p>Määrä: {product.amount}</p>

Seuraavalla:

routes/product.jsx<p>Nimi: {product.name ? product.name : <i>nimetön</i>}</p>
<p>Hinta: {product.cost ? product.cost : <i>tuntematon</i>}</p>
<p>Määrä: {product.amount ? product.amount : <i>tuntematon</i>}</p>

Meidän on vielä avattava main.jsx ja lisättävä sinne loader:n tuonti, kutsutaan sitä productLoader:ksi:

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

Ja määritettävä se lataajaksi tuotteen sivun reittioliolle, lisäämällä sen children:iin ominaisuuden element jälkeen:

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

Valmista, tuotesivun tietojen lataamisen kanssa olemme selvittäneet! Tosiaan, meillä ei ole vielä mitään ladattavaa. Käynnistä sovellus, lisää tuotteita ja napsauttele niitä listassa varmistaaksesi, että kaikki toimii.