React Router හි තවත් මාර්ගයක් එකතු කිරීම

අපට ප්‍රධාන පිටුවට යන මූල මාර්ගය ඇත, එහි නිෂ්පාදන සඳහා සබැඳි ඇත. දැන් අපි තවත් මාර්ගයක් එකතු කරමු, එවිට සබැඳිවලින් එකක් මත ක්ලික් කළ විට දෝෂ තිරයක් නොව නිෂ්පාදනය සඳහා පිටුව පෙන්වනු ඇත.

පළමුව, අපි පසුගිය පාඩම්වලදී සාදන ලද අපගේ යෙදුම විවෘත කර, අපි routes ෆෝල්ඩරය තුළ product.jsx ගොනුව සාදමු. එහි Product කොම්පෝනන්ටය සාදමු:

function Product() {}

export default Product;

දැන් අපි Product ඇතුළත product වස්තුව සාදමු, ගුණාංග සමඟ name, cost සහ amount, දැනට මේවා යම් ස්ථාවර අගයන් වනු ඇත:

function Product() {
	const product = {
		name: 'Product',
		cost: 400,
		amount: 5,
	};
}

export default Product;

නිෂ්පාදන පිටුවේ අපි පිළිවෙලින් එහි නම, පිරිවැය සහ ප්‍රමාණය ප්‍රදර්ශනය කරමු:

return (
	<div>
		<h2>නිෂ්පාදන පිටුව</h2>
		<p>නම: {product.name}</p>
		<p>පිරිවැය: {product.cost}</p>
		<p>ප්‍රමාණය: {product.amount}</p>
	</div>
);

Product කොම්පෝනන්ටය අනිවාර්යයෙන්ම ආයාත කරන්න main.jsx ගොනුවට:

import Product from './routes/product';

අවසාන වශයෙන්, තවත් මාර්ගයක් අපගේ යෙදුමට එකතු කරමු, මෙය මූල මාර්ගයට පසුව කරමු. මාර්ගය ලෙස 'products/:productId' සඳහන් කරන්න, සහ ප්‍රදර්ශනය කිරීම සඳහා අංගය ලෙස අපි Product කොම්පෝනන්ටය භාවිතා කරමු:

{
	path: '/',
	element: <Root />,
	errorElement: <ErrorPage404 />,
},
{
	path: 'products/:productId',
	element: <Product />,
},

දැන් අපි යෙදුම ආරම්භ කරමු, සබැඳි මත ක්ලික් කර අපි නිෂ්පාදන පිටුවට පැමිණෙමු (දැනට එය සියලු සබැඳි සඳහා එක හා සමානය), දෝෂයකට නොව.

පසුගිය පාඩම් සඳහා කාර්යයන්හිදී ඔබ විසින් සාදන ලද යෙදුම ගන්න. පාඩම් ද්‍රව්‍ය භාවිතා කරමින්, මේ ආකාරයටම student.jsx ගොනුවක් සාදන්න, ශිෂ්‍ය පිටුවේ ඔහුගේ නම, අන්වර්ථ නාමය, ඇතුළත් වූ වර්ෂය සහ විශේෂත්වය ප්‍රදර්ශනය වේවා. main.jsx ගොනුවේ, ශිෂ්‍ය පිටුව සඳහා නව මාර්ගයක් එකතු කරන්න, path හි අගය 'students/:studentId' ලෙස සකසන්න. ඔබ සබැඳි මත ක්ලික් කළ විට දැන් ඔබට ශිෂ්‍ය පිටුවට පැමිණෙන බවට වග බලා ගන්න.