Lataustietojen hakeminen URL-parametreilla React Routerissa

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

import { getProduct } from '../forStorage';

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

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

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

import { useLoaderData } from 'react-router-dom';

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

const { product } = useLoaderData();

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

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

Seuraavalla:

<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:

import 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:

children: [
	{
		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.

Ota edellisten oppituntien tehtävissä luomasi sovellus. Hyödynnä oppitunnin materiaaleja ja toteuta loader, kytke se, ja hyödynnä siitä saatavia tietoja opiskelijan sivulla.