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

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

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

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

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

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

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

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

const { product } = useLoaderData();

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

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

Šiuo kodu:

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

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

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

Paimkite programėlę, kurią sukūrėte užduotyse ankstesnėse pamokose. Naudodamiesi pamokos medžiaga, įgyvendinkite loader, prijunkite jį, panaudokite iš jo gautus duomenis studento puslapiui.