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:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // értékek tömbje
}

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