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:

app/users/[id]/page.jsxexport 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:

app/users/[id]/page.jsxexport default function User({ params }) {
  return <p>
    lietotājs {params.id}
  </p>;
}

Задание 1

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

Задание 2

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

Задание 3

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

Ir dots šāds masīvs:

page.jsxlet 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.

Задание 4

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

Ir dots šāds masīvs:

page.jsxlet 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.