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:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // vērtību masīvs
}

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