Skikkingssegmentreeks in dinamiese roete in NextJS

Indien nodig, kan 'n reeks van alle segmente in een veranderlike verkry word. Hiervoor word die parameter in vierkantige hakies geneem, en 'n beletselteken word voor die parameternaam geplaas. Kom ons kyk na 'n voorbeeld.

Veronderstel ons het 'n roete van die volgende vorm: /prod/:category/:name/:id/, waar die met dubbelpunte gemerkte parameters dinamies is. Kom ons verkry 'n reeks waardes van hierdie parameters in 'n veranderlike. Die naam van hierdie veranderlike kan enigiets wees. Byvoorbeeld, laat ons dit slugs noem.

Laat ons die volgende lêerstelsel skep:

/app/
- /prod/
  - /[...slugs]/

Laat ons die ooreenstemmende komponent skep:

export default function Prod({ params }) {
	console.log(params); // reeks waardes
}

Skep 'n roete wat adresse van die vorm /prod/:category/:name hanteer.

Veronderstel die volgende reeks word gegee:

let prods = [
	{
		category: 'catg1',
		name: 'prod1',
		cost: 100,
	},
	{
		category: 'catg1',
		name: 'prod2',
		cost: 200,
	},
	{
		category: 'catg2',
		name: 'prod1',
		cost: 300,
	},
	{
		category: 'catg2',
		name: 'prod3',
		cost: 400,
	},
];

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