Szegmens tömb a dinamikus útvonalakban NextJS-ben

Szükség esetén az összes szegmenst be lehet szerezni egyetlen változóba. Ehhez a paramétert szögletes zárójelek közé kell tenni, és a paraméter neve elé három pontot kell tenni. Nézzük meg egy példán.

Tegyük fel, hogy van egy a következő alakú útvonalunk: /prod/:category/:name/:id/, ahol a kettősponttal jelölt paraméterek dinamikusak. Szerezzük be ezen paraméterek értékeinek tömbjét valamilyen változóba. Ennek a változónak a neme tetszőleges lehet. Például nevezzük slugs-nak.

Készítsük el a következő fájlszerkezetet:

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

Készítsük el a megfelelő komponenst:

export default function Prod({ params }) {
	console.log(params); // értékek tömbje
}

Készítsen egy útvonalat, amely a /prod/:category/:name alakú címeket kezeli.

Tegyük fel, hogy a következő tömb adott:

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

Úgy kell megalkotni, hogy a paraméterek értékétől függően a komponens megjelenítésében a megfelelő termék jelenjen meg.