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

Параметрларнинг қийматига қараб, компонентнинг версткасида мос келувчи продукт чиқарилишини таъминланг.