อาร์เรย์ของเซกเมนต์ในไดนามิกเราท์ของ NextJS

หากจำเป็น คุณสามารถดึง อาร์เรย์ของทุกเซกเมนต์มาไว้ในตัวแปรเดียวได้ สำหรับการนี้ พารามิเตอร์จะถูกใส่ในวงเล็บเหลี่ยม และนำหน้าชื่อพารามิเตอร์ด้วย จุดไข่ปลา มาดูตัวอย่างกัน

สมมติว่าเรามีเราท์ที่มีรูปแบบดังต่อไปนี้: /prod/:category/:name/:id/, โดยที่พารามิเตอร์ที่มีเครื่องหมายโคลอน เป็นไดนามิก ลองดึงค่าอาร์เรย์ของพารามิเตอร์เหล่านี้ มาไว้ในตัวแปรใดตัวแปรหนึ่ง ชื่อของ ตัวแปรนี้สามารถเป็นอะไรก็ได้ เช่น ตั้งชื่อว่า slugs

มาสร้างโครงสร้างไฟล์ดังต่อไปนี้:

/app/
- /prod/
  - /[...slugs]/

มาสร้างคอมโพเนนต์ที่เกี่ยวข้อง:

export default function Prod({ params }) {
	console.log(params); // อาร์เรย์ของค่า
}

สร้างเราท์ที่จัดการกับที่อยู่ รูปแบบ /prod/:category/:name

ให้มีอาร์เรย์ต่อไปนี้:

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

ทำให้คอมโพเนนต์แสดงสินค้าที่ตรงกัน โดยขึ้นอยู่กับค่า ของพารามิเตอร์ในมาร์กอัป คอมโพเนนต์