NextJS හි ගතික රුට්

NextJS හි ඔබට ගතික රුට් සෑදිය හැකිය. එවැනි රුට් මගින් URL හි කොටසකට අත්තනෝමතික අගයක් තිබිය හැකි බව උපකල්පනය කරයි. උදාහරණයක් ලෙස අපි /users/1 යන ලිපිනය ගනිමු, මෙහි එකක් වෙනුවට ඕනෑම අංකයක් විය හැකිය, තාක්ෂණික වශයෙන් එය පරිශීලකයාගේ id හා ගැලපේ, අපි ප්‍රදර්ශනය කිරීමට අපේක්ෂා කරන.

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

ගතික පරාමිතියක් සෑදීම සඳහා, අනුරූප බහාලුමේ නම වර්ග අවුලුල් තුළ තැබිය යුතුය. අපගේ නඩුවේ එය පහත බහාලුම් ව්‍යුහය වනු ඇත:

/app/
- /users/
  - /[id]/

අපි අනුරූප සංරචකය සාදමු:

export default function User() {
	return <p>
		පරිශීලක
	</p>;
}

මෙහිදී අපි සකසන ලද පරාමිතිය විශේෂ වස්තුව params හි ගබඩා වේ. අපි මෙම පරාමිතියේ අගය ප්‍රදර්ශනය කරමු:

export default function User({ params }) {
	return <p>
		පරිශීලක {params.id}
	</p>;
}

/city/:name ආකාරයේ ලිපින සකසන රුට් එකක් සාදන්න, මෙහි :name වෙනුවට ඕනෑම වැකියක් විය හැකිය.

/show/:country/:city ආකාරයේ ලිපින සකසන රුට් එකක් සාදන්න, මෙහි :country සහ :city වෙනුවට ඕනෑම වැකි විය හැකිය.

/post/:id ආකාරයේ ලිපින සකසන රුට් එකක් සාදන්න, මෙහි :id වෙනුවට ඕනෑම අංකයක් විය හැකිය.

පහත දැක්වෙන අරාව ලබා දී ඇතැයි සිතන්න:

let posts = [
	'post1',
	'post2',
	'post3',
	'post4',
	'post5',
];

export default function Post() {
	
}

පරාමිතියේ අගය මත පදනම්ව id සංරචකයේ වියානයේ අනුරූප තැපැල් ලිපිය ප්‍රදර්ශනය වන ආකාරයට සකසන්න.

/prod/:id ආකාරයේ ලිපින සකසන රුට් එකක් සාදන්න, මෙහි :id වෙනුවට ඕනෑම අංකයක් විය හැකිය.

පහත දැක්වෙන අරාව ලබා දී ඇතැයි සිතන්න:

let prods = [
	{
		id: 1,
		name: 'prod1',
		cost: 100,
	},
	{
		id: 2,
		name: 'prod2',
		cost: 200,
	},
	{
		id: 3,
		name: 'prod3',
		cost: 300,
	},
];

export default function Prod() {
	
}

පරාමිතියේ අගය මත පදනම්ව id සංරචකයේ වියානයේ අනුරූප නිෂ්පාදනය ප්‍රදර්ශනය වන ආකාරයට සකසන්න.