Mảng Segment trong Dynamic Route ở NextJS

Khi cần thiết, bạn có thể lấy mảng tất cả các segment vào một biến. Để làm điều này, tham số được đặt trong dấu ngoặc vuông, và trước tên tham số đặt ba dấu chấm. Hãy xem qua một ví dụ.

Giả sử chúng ta có route có dạng sau: /prod/:category/:name/:id/, trong đó các tham số được đánh dấu bằng dấu hai chấm là dynamic. Hãy lấy mảng giá trị của các tham số này vào một biến nào đó. Tên của biến này có thể là bất kỳ tên nào. Ví dụ, hãy đặt tên nó là slugs.

Hãy tạo cấu trúc tệp sau:

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

Hãy tạo component tương ứng:

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // mảng giá trị
}

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