Segmentų masyvas dinaminėje NextJS maršruto užklausoje

Jei reikia, galima gauti visų segmentų masyvą į vieną kintamąjį. Tam parametras imamas laužtiniuose skliaustuose, o prieš parametro pavadinimą dedamas triktaškis. Pažiūrėkime pavyzdžiu.

Tarkime, turime tokio tipo maršrutą: /prod/:category/:name/:id/, kur parametrai, pažymėti dvitaškiu, yra dinaminiai. Gaukime šių parametrų reikšmių masyvą į kokį nors kintamąjį. Šio kintamojo pavadinimas gali būti bet koks. Pavyzdžiui, pavadinkime jį slugs.

Sukurkime tokią failų struktūrą:

Sukurkime atitinkamą komponentą:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // reikšmių masyvas
}
Задание 1

Sukurkite maršrutą, apdorojantį adresus /prod/:category/:name tipo.

Tegu yra toks masyvas:

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

Padarykite taip, kad, priklausomai nuo parametrų reikšmių, komponento išvestyje būtų rodomas atitinkamas produktas.