Դինամիկ երթուղու հատվածների զանգված NextJS-ում

Անհրաժեշտության դեպքում կարելի է ստանալ բոլոր հատվածների զանգվածը մեկ փոփոխականի մեջ։ Դրա համար պարամետրը վերցվում է քառակուսի փակագծերի մեջ, իսկ պարամետրի անվան առաջ դրվում է էլիպսիս։ Դիտարկենք մի օրինակ։

Ենթադրենք ունենք հետևյալ տեսքի երթուղին․ /prod/:category/:name/:id/, որտեղ երկ점նիով նշված պարամետրերը դինամիկ են։ Եկեք ստանանք այդ պարամետրերի արժեքների զանգվածը ինչ-որ փոփոխականի մեջ։ Այս փոփոխականի անունը կարող է լինել ցանկացած։ Օրինակ, անվանենք այն slugs։

Կառուցենք հետևյալ ֆայլային կառուցվածքը․

• /app//prod//[...slugs]/

Ստեղծենք համապատասխան կոմպոնենտը․

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // արժեքների զանգված
}

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