Dinamiskie maršruti NextJS

NextJS var izveidot dinamiskos maršrutus. Šādi maršruti paredz, ka daļa no URL var būt patvaļīga vērtība. Piemēram, ņemsim adresi /users/1, kurā vieninieka vietā var būt jebkurš skaitlis, tehniski atbilstošs lietotāja id, ko vēlamies attēlot.

Šajā gadījumā mums nav jāveido vairākas mapes katram iespējamam skaitlim. Pietiek norādīt, ka šī daļa no adreses ir dinamiska. Šajā gadījumā visus šāda veida pieprasījumus apstrādās kopīgs fails page.jsx.

Lai izveidotu dinamisko parametru, atbilstošās mapes nosaukums jāieliek kvadrātiekavās. Mūsu gadījumā tā būs šāda mapju struktūra:

/app/
- /users/
  - /[id]/

Izveidosim atbilstošo komponentu:

export default function User() {
	return <p>
		lietotājs
	</p>;
}

Šajā gadījumā mūsu norādītais parametrs tiks saglabāts speciālā objektā params. Izvadīsim šī parametra vērtību:

export default function User({ params }) {
	return <p>
		lietotājs {params.id}
	</p>;
}

Izveidojiet maršrutu, kas apstrādā adreses veida /city/:name, kur :name vietā var būt jebkura virkne.

Izveidojiet maršrutu, kas apstrādā adreses veida /show/:country/:city, kur :country un :city vietā var būt jebkuras virknes.

Izveidojiet maršrutu, kas apstrādā adreses veida /post/:id, kur :id vietā var būt jebkurš skaitlis.

Ir dots šāds masīvs:

let posts = [
	'ieraksts1',
	'ieraksts2',
	'ieraksts3',
	'ieraksts4',
	'ieraksts5',
];

export default function Post() {
	
}

Iestatiet tā, lai atkarībā no parametra id vērtības komponenta attēlojumā tiktu izvadīts atbilstošais ieraksts.

Izveidojiet maršrutu, kas apstrādā adreses veida /prod/:id, kur :id vietā var būt jebkurš skaitlis.

Ir dots šāds masīvs:

let prods = [
	{
		id: 1,
		name: 'produkts1',
		cost: 100,
	},
	{
		id: 2,
		name: 'produkts2',
		cost: 200,
	},
	{
		id: 3,
		name: 'produkts3',
		cost: 300,
	},
];

export default function Prod() {
	
}

Iestatiet tā, lai atkarībā no parametra id vērtības komponenta attēlojumā tiktu izvadīts atbilstošais produkts.