Segmentu masīvs dinamiskajā maršrutā NextJS

Vajadzības gadījumā var iegūt visu segmentu masīvu vienā mainīgajā. Lai to izdarītu, parametrs tiek ņemts kvadrātiekavās, un pirms parametra nosaukuma tiek likts elipses zīme. Apskatīsim piemērā.

Pieņemsim, ka mums ir šāda veida maršruts: /prod/:category/:name/:id/, kur ar kolu atzīmētie parametri ir dinamiskie. Iegūstam šo parametru vērtību masīvu kādā mainīgajā. Šī mainīgā nosaukums var būt jebkurš. Piemēram, nosauksim to par slugs.

Izveidosim šādu failu struktūru:

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

Izveidosim atbilstošo komponentu:

export default function Prod({ params }) {
	console.log(params); // vērtību masīvs
}

Izveidojiet maršrutu, kas apstrādā adreses veidā /prod/:category/:name.

Pieņemsim, ka ir dots šāds masīvs:

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

Iestatiet tā, lai atkarībā no parametru vērtībām komponenta izskatā tiktu izvadīts atbilstošais produkts.