Segmentarray i dynamisk rute i NextJS

Hvis det er nødvendigt, kan man få et array med alle segmenter i én variabel. For at gøre dette sættes parameteren i firkantede parenteser, og før parameternavnet sættes tre prikker. Lad os se på et eksempel.

Antag, at vi har en rute af følgende form: /prod/:category/:name/:id/, hvor parametrene markeret med kolon er dynamiske. Lad os få en array med værdierne af disse parametre i en variabel. Navnet på denne variabel kan være hvad som helst. For eksempel, lad os kalde den slugs.

Lad os lave følgende filstruktur:

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

Lad os lave den tilsvarende komponent:

export default function Prod({ params }) {
	console.log(params); // array af værdier
}

Lav en rute, der håndterer adresser af typen /prod/:category/:name.

Antag følgende array:

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,
	},
];

Sørg for, at afhængigt af parametrenes værdi, bliver det tilsvarende produkt vist i komponentens opmærkning.