React Router дар URL параметрҳо бо роҳи Loader маълумотҳоро ба даст овардан

Дар дарси гузашта мо барои ба даст овардани маълумоти саҳифаи маҳсул функсия навиштем, биёед getProduct-ро дар файли product.jsx ворид кунем:

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

Функсияи loader-и loader-ро баъд аз воридот ва пеш аз функсияи Product нависед. URL параметрҳоро ба он интиқол диҳед:

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

Ҳамчунин ҳуки useLoaderData-ро барои истифодаи маълумоти гирифташуда аз loader ворид кунем:

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';

Ва онро ҳамчун loader барои объекти масири саҳифаи маҳсул нависед, онро ба children пас аз хосияти element илова кунед:

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

Ҳама чиз, мо бо боркунии маълумот барои саҳифаи маҳсул кор кардем! Рост, ҳоло бор кардан чизе надорем. Барномаро оғоз кунед, маҳсулотҳоро илова кунед ва дар рӯйхат бар онҳо клик кунед, то боварӣ ҳосил кунед, ки ҳама чиз кор мекунад.

Барномаеро, ки шумо дар вазифаҳои дарсҳои гузашта сохтаед, гиред. Бо истифода аз моддаҳои дарс, loader-ро амалӣ кунед, онро пайваст кунед, маълумоти аз онро барои саҳифаи донишҷӯ истифода баред.