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:

export default function Prod({ params }) {
	console.log(params); // mảng giá trị
}

Hãy tạo một route xử lý các địa chỉ dạng /prod/:category/:name.

Cho mảng sau:

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

Hãy làm sao cho tùy thuộc vào giá trị của các tham số, trong phần layout của component sẽ hiển thị sản phẩm tương ứng.