React Router-те URL параметрлері бойынша жүктеуші деректерін алу

Алдыңғы сабақта біз өнім бетінің деректерін алу үшін функция жаздық, product.jsx файлында getProduct импортын жасайық:

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

Импорттан кейін және Product функциясынан бұрын loader жүктеуші функциясын жазайық. Оған URL параметрлерін берейік:

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

Сондай-ақ, жүктеушіден алынған деректерді пайдалану үшін useLoaderData хукін импорттайық:

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

useLoaderData қолданайық, сәйкесінше Product функциясының басындағы product объектісін жасау жолын мынаған ауыстырайық:

const { product } = useLoaderData();

Әрине, біз ескі product объектісін алып тастағандықтан, верстканы сәл өзгертеміз. Абзацтардың мазмұнын ауыстырайық:

<p>Атауы: {product.name}</p>
<p>Құны: {product.cost}</p>
<p>Саны: {product.amount}</p>

Мынаған:

<p>Атауы: {product.name ? product.name : <i>атаусыз</i>}</p>
<p>Құны: {product.cost ? product.cost : <i>белгісіз</i>}</p>
<p>Саны: {product.amount ? product.amount : <i>белгісіз</i>}</p>

main.jsx ашып, онда loader импортын қосу керек, оны productLoader деп атайық:

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

Және оны өнім бетінің маршрут объектісі үшін жүктеуші ретінде көрсету керек, оны children ішінде element қасиетінен кейін қосамыз:

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

Барлығы, өнім бетінің деректерін жүктеумен біз айналыстық! Алайда, әзірше жүктейтін ештеңе жоқ. Қосымшаны іске қосыңыз, өнімдерді қосыңыз және тізімде оларды басу арқылы бәрі жұмыс істейтініне көз жеткізіңіз.

Алдыңғы сабақтардың тапсырмаларында сіз жасаған қосымшаны алыңыз. Сабақ материалын пайдаланып, студент беті үшін loader жүзеге асырыңыз, оны қосыңыз, одан алынған деректерді студент бетінде пайдаланыңыз.