React Router හි කැදලි මාර්ග

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

මේ සඳහා, අපි main.jsx ගොනුව විවෘත කර මුල් මාර්ගයට අපගේ නිෂ්පාදන පිටුව සඳහා වන මාර්ගය අනුචර මාර්ගයක් ලෙස සාදමු හෝ වෙනත් වචන වලින්, එය මුල් මාර්ගයට "කැඳලමු". මේ සඳහා, අපි මාර්ග වස්තුවේ තවත් ගුණාංගයක් වන children භාවිතා කරමු:

const router = createBrowserRouter([
	{
		path: '/',
		element: <Root />,
		errorElement: <ErrorPage404 />,
		children: [
			{
				path: 'products/:productId',
				element: <Product />,
			},
		],
	},

]);

අපි නැවතත් සබැඳි ක්ලික් කරමු, නමුත් නිෂ්පාදන ලැයිස්තුවේ දකුණු පස අපට කිසිවක් පෙනෙන්නේ නැත. මන්ද යත් අපි මුල් මාර්ගයට එහි අනුචර මාර්ග පෙන්වීමට අවශ්‍ය ස්ථානය කියා නොදුන් නිසාය.

ඇත්තටම, මාපක මාර්ගයේ අනුචර මාර්ගවල මූලද්‍රව්‍ය පෙන්වීමට අපට Outlet සංරචකය උපකාරී වේ. අපි එය පුස්තකාලයෙන් ආයාත කර මුල් මාර්ගය සඳහා වන ගොනුවට ගනිමු:

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

පසුව එය #product div එකකින් ඔතා මුල් මාර්ගය සඳහා වන පිරිසැලසුමට nav වසා දැමූ ටැගයට පසුව, පිටුවල අවසානයේ එක් කරන්න, සමස්ත ඉදිකිරීම තවත් #main div එකකින් ඔතා දමන්න:

return (
	<div id="main">
		<nav>
			<a href={`/products/1`}>Product1</a>
			<a href={`/products/2`}>Product2</a>
		</nav>
		<div id="product">
			<Outlet />
		</div>
	</div>
);

සබැඳි ක්ලික් කිරීමෙන්, දැන් අපට නිෂ්පාදන ලැයිස්තුව සහ නිෂ්පාදන පිටුව දෙකම පෙනේ.

අපගේ index.css ගොනුවට ස්වල්පමත විලාසිතා එක් කරමු:

h1, h2 {
	margin: 0;
}

div#main {
	display: flex;
	margin: 20px;
}

div#product {
	margin-left: 40px;
}

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

දැන් සාදන්න, සබැඳි ක්ලික් කිරීමේදී තිරයේ ශිෂ්‍ය ලැයිස්තුව සහ ශිෂ්‍ය පිටුව දෙකම පෙන්වන ලෙස.