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

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

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

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

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

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

app/prod/[...slugs]/page.jsxexport default function Prod({ params }) {
  console.log(params); // อาร์เรย์ของค่า
}

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