React Router එකේ URL පරාමිති ඔස්සේ loader දත්ත ලබා ගැනීම

පසුගිය පාඩමේ දී අපි නිෂ්පාදන පිටුවේ දත්ත ලබා ගැනීම සඳහා ශ්‍රිතයක් ලිව්වෙමු, අපි දැන් getProduct ශ්‍රිතය product.jsx ගොනුවට ආයාත කරමු:

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

අපි ආයාත කිරීමට පසුව සහ Product ශ්‍රිතයට පෙර ඍජුවම loader ශ්‍රිතය loader ලියමු. එයට URL පරාමිති යොමු කරමු:

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

එසේම, loader එකෙන් ලබාගත් දත්ත භාවිතා කිරීම සඳහා useLoaderData hook එක ආයාත කරමු:

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

අපි useLoaderData යොදා ගනිමු, ඒ අනුව Product ශ්‍රිතය ආරම්භයේ ඇති product වස්තුව සෑදීමේ පේළිය පහත දැක්වෙන ආකාරයට ප්‍රතිස්ථාපනය කරමු:

const { product } = useLoaderData();

ඇත්ත වශයෙන්ම, අපගේ පැරණි product වස්තුව ඉවත් කිරීම හේතුවෙන් අපගේ HTML ව්‍යුහය ටිකක් වෙනස් කිරීමට සිදුවේ. පේරාග්‍රැෆ් වල අන්තර්ගතය ප්‍රතිස්ථාපනය කරමු:

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

පහත දැක්වෙන ආකාරයට:

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

අපට ඉතිරිව ඇත්තේ main.jsx ගොනුව විවෘත කර එහි loader ආයාත කිරීමයි, අපි එය productLoader ලෙස නම් කරමු:

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

සහ නිෂ්පාදන පිටුව සඳහා වන මාර්ග වස්තුවේ loader එක ලෙස එය සඳහන් කිරීමයි, එය children තුළ element ගුණාංගයට පසුව එකතු කරමු:

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

ඔබලා දන්නවාද, නිෂ්පාදන පිටුව සඳහා දත්ත පූරණය කිරීම ගැන අපි සියල්ලම තේරුම් ගත්තෙමු! නමුත්, දැනට අපට පූරණය කිරීමට කිසිවක් නැත. යෙදුම ධාවනය කරන්න, නිෂ්පාදන එකතු කර ඒවා ලැයිස්තුවේ ඔබා පරීක්ෂා කරන්න සියල්ල නිසි ලෙස ක්‍රියා කරන බවට.

පෙර පාඩම් සඳහා වැඩ සටහන් වලදී ඔබ සාදන ලද යෙදුම ගන්න. පාඩමේ දී ඉගෙන ගත් දේ භාවිතා කරමින්, loader ශ්‍රිතය ක්‍රියාත්මක කරන්න, එය සම්බන්ධ කරන්න, සහ ශිෂ්‍ය පිටුව සඳහා එයින් ලබාගත් දත්ත භාවිතා කරන්න.