Dinamiese Roetes in NextJS

In NextJS kan jy dinamiese roetes skep. Sulke roetes veronderstel dat 'n deel van die URL enige waarde kan hê. As voorbeeld, neem die adres /users/1, waarin die eenheid met enige getal vervang kan word, tegnies ooreenstemmend met die id van die gebruiker wat ons wil uitvoer.

In hierdie geval hoef ons nie verskeie vouers vir elke moontlike nommer te skep nie. Dit is genoeg om hierdie deel van die adres dinamies te verklaar. In hierdie geval sal alle versoeke van hierdie tipe deur die algemene lêer page.jsx hanteer word.

Om 'n dinamiese parameter te maak, moet die naam van die ooreenstemmende vouer in vierkantige hakies geplaas word. In ons geval sal dit die volgende vouerstruktuur wees:

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

Kom ons maak die ooreenstemmende komponent:

export default function User() {
	return <p>
		gebruiker
	</p>;
}

Hierdie gespesifiseerde parameter sal in 'n spesiale voorwerp params gestoor word. Kom ons vertoon die waarde van hierdie parameter:

export default function User({ params }) {
	return <p>
		gebruiker {params.id}
	</p>;
}

Maak 'n roet wat adresse van die tipe /city/:name hanteer, waar in plaats van :name enige string kan wees.

Maak 'n roet wat adresse van die tipe /show/:country/:city hanteer, waar in plaats van :country en :city enige strings kan wees.

Maak 'n roet wat adresse van die tipe /post/:id hanteer, waar in plaats van :id enige getal kan wees.

Laat die volgende skikking gegee word:

let posts = [
	'pos1',
	'pos2',
	'pos3',
	'pos4',
	'pos5',
];

export default function Post() {
	
}

Sorg dat, afhangend van die waarde van die parameter id, die ooreenstemmende pos in die komponent se opmaak vertoon word.

Maak 'n roet wat adresse van die tipe /prod/:id hanteer, waar in plaats van :id enige getal kan wees.

Laat die volgende skikking gegee word:

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

export default function Prod() {
	
}

Sorg dat, afhangend van die waarde van die parameter id, die ooreenstemmende produk in die komponent se opmaak vertoon word.