Datu iegūšana no loader pēc URL parametriem React Router

Iepriekšējā nodarbībā mēs uzrakstījām funkciju produkta lapas datu iegūšanai, importēsim getProduct failā product.jsx:

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

Uzrakstīsim loader funkciju loader tūlīt pēc importa un pirms funkcijas Product. Padodam tai URL parametrus:

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

Arī importēsim hook useLoaderData priekš datu izmantošanas, kas iegūti no loader:

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

Lietosim useLoaderData, attiecīgi aizstājot rindu ar objekta product izveidi funkcijas Product sākumā ar sekojošo:

const { product } = useLoaderData();

Un, protams, nedaudz mainīsim mūsu izmēstu, jo mēs noņēmām veco objektu product. Aizstāsim rindkopu saturu:

<p>Name: {product.name}</p>
<p>Cost: {product.cost}</p>
<p>Amount: {product.amount}</p>

Uz sekojošo:

<p>Name: {product.name ? product.name : <i>unnamed</i>}</p>
<p>Cost: {product.cost ? product.cost : <i>unknown</i>}</p>
<p>Amount: {product.amount ? product.amount : <i>unknown</i>}</p>

Mums atliek atvērt main.jsx un pievienot tur importu loader, nosauksim to par productLoader:

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

Un norādīt to kā loader produkta lapas maršruta objektam, pievienojot to children pēc īpašības element:

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

Viss, ar datu ielādi produkta lapai mēs esam tikuši galā! Tiesa, ielādēt pagaidām nav ko. Palaidiet līdzekli, pievienojiet produktus un noklikšķiniet uz tiem sarakstā, lai pārliecinātos, ka viss darbojas.

Paņemiet līdzekli, ko izveidojāt uzdevumos iepriekšējām nodarbībām. Izmantojot nodarbības materiālus, realizējiet loader, pievienojiet to, izmantojiet datus no tā studenta lapai.