Dinaminiai maršrutai NextJS

NextJS galima kurti dinaminius maršrutus. Tokie maršrutai numato, kad URL dalis gali turėti savavališką reikšmę. Pavyzdžiui, paimkime adresą /users/1, kuriame vietoj vieneto gali būti bet koks skaičius, techniškai atitinkantis vartotojo id, kurį norime parodyti.

Šiuo atveju mums nereikia kurti daugybės aplankų kiekvienam galimam skaičiui. Pakanka paskelbti šią adreso dalinį dinamine. Tokiu atveju visus tokio pobūdžio užklausas apdoros bendras failas page.jsx.

Norint padaryti dinaminį parametrą, atitinkamo aplanko pavadinimą reikia paimti į laužtinius skliaustus. Mūsų atveju tai bus tokia aplankų struktūra:

/app//users//[id]/

Sukurkime atitinkamą komponentą:

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

Tuomet mūsų nustatytas parametras bus saugomas specialiame objekte params. Parodykime šio parametro reikšmę:

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

Задание 1

Sukurkite maršrutą, apdorojantį adresus pavidalo /city/:name, kur vietoj :name gali būti bet kuri eilutė.

Задание 2

Sukurkite maršrutą, apdorojantį adresus pavidalo /show/:country/:city, kur vietoj :country ir :city gali būti bet kurios eilutės.

Задание 3

Sukurkite maršrutą, apdorojantį adresus pavidalo /post/:id, kur vietoj :id gali būti bet koks skaičius.

Tegu pateikiamas toks masyvas:

page.jsxlet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

export default function Post() {
  
}

Padarykite taip, kad, priklausomai nuo parametro id reikšmės, komponento išdėstyme būtų rodomas atitinkamas įrašas.

Задание 4

Sukurkite maršrutą, apdorojantį adresus pavidalo /prod/:id, kur vietoj :id gali būti bet koks skaičius.

Tegu pateikiamas toks masyvas:

page.jsxlet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];

export default function Prod() {
  
}

Padarykite taip, kad, priklausomai nuo parametro id reikšmės, komponento išdėstyme būtų rodomas atitinkamas produktas.