Array van segmenten in dynamische route in NextJS

Indien nodig kan een array van alle segmenten in één variabele worden verkregen. Hiervoor wordt de parameter tussen vierkante haken geplaatst, en voor de parameternaam wordt een beletselteken gezet. Laten we een voorbeeld bekijken.

Stel we hebben een route van de volgende vorm: /prod/:category/:name/:id/, waar de met een dubbele punt gemarkeerde parameters dynamisch zijn. Laten we een array van de waarden van deze parameters in een variabele krijgen. De naam van deze variabele kan willekeurig zijn. Laten we hem bijvoorbeeld slugs noemen.

Laten we de volgende bestandsstructuur maken:

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

Laten we de bijbehorende component maken:

export default function Prod({ params }) {
	console.log(params); // array van waarden
}

Maak een route die adressen verwerkt van het type /prod/:category/:name.

Stel we hebben de volgende 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,
	},
];

Zorg ervoor dat, afhankelijk van de waarde van de parameters, het corresponderende product wordt weergegeven in de opmaak van de component.