Array Segmen dalam Laluan Dinamik NextJS

Jika perlu, anda boleh mendapatkan array semua segmen dalam satu pembolehubah. Untuk ini, parameter diambil dalam kurungan segi empat, dan tiga titik diletakkan sebelum nama parameter. Mari lihat contoh.

Katakan kita mempunyai laluan seperti berikut: /prod/:category/:name/:id/, di mana parameter yang ditanda dengan titik bertindih adalah dinamik. Mari dapatkan array nilai parameter ini ke dalam beberapa pembolehubah. Nama pembolehubah ini boleh apa sahaja. Sebagai contoh, mari kita namakannya slugs.

Mari buat struktur fail berikut:

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

Mari buat komponen yang sepadan:

export default function Prod({ params }) {
	console.log(params); // array nilai
}

Buat laluan yang mengendalikan alamat jenis /prod/:category/:name.

Katakan array berikut diberikan:

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

Lakukan supaya bergantung pada nilai parameter dalam hiasan komponen, produk yang sepadan dipaparkan.