Vargu i segmenteve në rrugëzimin dinamik në NextJS

Nëse është e nevojshme, mund të merrni të gjithë segmentet në një variabël. Për këtë, parametri merret në kllapa katrore, dhe para emrit të parametrit vendoset pikëpresje. Le ta shohim me një shembull.

Le të themi se kemi një rrugë të formës së mëposhtme: /prod/:category/:name/:id/, ku parametrat e shënuar me dy pika janë dinamikë. Le të marrim vargun e vlerave të këtyre parametrave në ndonjë variabël. Emri i kësaj variable mund të jetë çfarëdo. Për shembull, le ta quajmë atë slugs.

Le të krijojmë strukturën e mëposhtme të skedarëve:

Le të krijojmë komponentin përkatës:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // varg i vlerave
}
Задание 1

Krijoni një rrugë që përpunon adresat të formës /prod/:category/:name.

Le të jepet vargu i mëposhtëm:

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

Bëni që në varësi të vlerave të parametrave në shabllonin e komponentit të shfaqet produkti përkatës.