NextJS da dinamik routingda segmentlar massivi

Agar kerak bo'lsa, barcha segmentlarni bitta o'zgaruvchiga massiv sifatida olish mumkin. Buning uchun parametr kvadrat qavs ichiga olinadi, va parametr nomidan oldin uch nuqta qo'yiladi. Keling, buni misolda ko'ramiz.

Faraz qilaylik, bizda quyidagi ko'rinishdagi marshrut mavjud: /prod/:category/:name/:id/, bu yerda ikki nuqta bilan belgilangan parametrlar dinamik hisoblanadi. Keling, ushbu parametrlarning barcha qiymatlarini biron bir o'zgaruvchiga massiv sifatida olaylik. Ushbu o'zgaruvchining nomi ixtiyoriy bo'lishi mumkin. Masalan, uni slugs deb nomlaymiz.

Quyidagi fayl tuzilmasini yaratamiz:

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

Mos keladigan komponentni yaratamiz:

export default function Prod({ params }) {
	console.log(params); // qiymatlar massivi
}

/prod/:category/:name ko'rinishidagi manzillarni qayta ishlaydigan routing yarating.

Faraz qilaylik, quyidagi massiv berilgan:

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

Parametrlar qiymatiga qarab, komponentning vertkasida mos keladigan mahsulot chiqarilishini ta'minlang.