Массив сегментҳо дар роути динамикӣ дар 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,
	},
];

Чунки аз рӯи қимати параметрҳо дар верстаи компонент продукти мувофиқ чоп карда шавад.