სეგმენტების მასივი დინამიურ რაუტინგში NextJS-ში

საჭიროების შემთხვევაში შესაძლებელია ყველა სეგმენტის მიღება ერთ ცვლადში მასივის სახით. ამისთვის პარამეტრი იღებται კვადრატულ ფრჩხილებში, ხოლო პარამეტრის სახელის წინ იდება სამი წერტილი. მოდით შევხედოთ მაგალითს.

დავუშვათ, გვაქვს შემდეგი ტიპის მარშრუტი: /prod/:category/:name/:id/, სადაც ორწერტილით მონიშნული პარამეტრები არის დინამიური. მოდით მივიღოთ ამ პარამეტრების მნიშვნელობების მასივი რაიმე ცვლადში. ამ ცვლადის სახელი შეიძლება იყოს ნებისმიერი. მაგალითად, ვუწოდოთ მას slugs.

შევქმნათ შემდეგი ფაილური სტრუქტურა:

შევქმნათ შესაბამისი კომპონენტი:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // მნიშვნელობების მასივი
}
Задание 1

შექმენით რაუტი, რომელიც ამუშავებს მისამართებს /prod/:category/:name ფორმატის.

დაე, მოცემული იყოს შემდეგი მასივი:

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

გაუკეთეთ ისე, რომ პარამეტრების მნიშვნელობებიდან გამომდინარე კომპონენტის ვერსტკაში გამოჩნდეს შესაბამისი პროდუქტი.