Segmentmatrise i dynamisk rute i NextJS

Ved behov kan du få en matrise med alle segmenter i én variabel. For dette tas parameteren i firkantede parenteser, og før parameternavnet settes en ellipse. La oss se på et eksempel.

La oss si at vi har en rute av følgende type: /prod/:category/:name/:id/, hvor parametrene markert med kolon er dynamiske. La oss få en matrise med verdier av disse parameterne i en variabel. Navnet på denne variabelen kan være hva som helst. For eksempel, la oss kalle den slugs.

La oss lage følgende filstruktur:

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

La oss lage den tilsvarende komponenten:

export default function Prod({ params }) {
	console.log(params); // matrise med verdier
}

Lag en rute som håndterer adresser av typen /prod/:category/:name.

La oss si at du har følgende matrise:

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

Gjør slik at avhengig av verdien til parameterne i komponentens oppsett vises den tilsvarende produktet.