Dynaamiset reitit NextJS:ssä

NextJS:ssä voit luoda dynaamisia reittejä. Tällaiset reitit olettavat, että osa URL-osoitteesta voi olla mielivaltainen arvo. Esimerkkinä otamme osoitteen /users/1, jossa ykkösen sijasta voi olla mikä tahansa numero, teknisesti vastaten käyttäjän id:tä, jota haluamme näyttää.

Tässä tapauksessa meidän ei tarvitse luoda useita kansioita jokaiselle mahdolliselle numerolle. Riittää, että julistamme tämän osan osoitteesta dynaamiseksi. Tällöin kaikki tällaiset pyynnöt käsitellään yhteisessä tiedostossa page.jsx.

Jotta voit tehdä dynaamisen parametrin, tarvitset vastaavan kansion nimen laittaa hakasulkeisiin. Meidän tapauksessamme tämä on seuraava kansiorakenne:

/app//users//[id]/

Tehdään vastaava komponentti:

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

Tällöin asettamamme parametri säilytetään erityisessä objektissa params. Esitetään parametrin arvo:

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

Задание 1

Tee reitti, joka käsittelee osoitteita muotoa /city/:name, jossa :name:n sijasta voi olla mikä tahansa merkkijono.

Задание 2

Tee reitti, joka käsittelee osoitteita muotoa /show/:country/:city, jossa :country:n ja :city:n sijasta voi olla mitkä tahansa merkkijonot.

Задание 3

Tee reitti, joka käsittelee osoitteita muotoa /post/:id, jossa :id:n sijasta voi olla mikä tahansa numero.

Olkoon annettu seuraava taulukko:

page.jsxlet posts = [
  'julkaisu1',
  'julkaisu2',
  'julkaisu3',
  'julkaisu4',
  'julkaisu5',
];

export default function Post() {
  
}

Tee niin, että parametrin id arvosta riippuen komponentin renderöinnissä esitetään vastaava julkaisu.

Задание 4

Tee reitti, joka käsittelee osoitteita muotoa /prod/:id, jossa :id:n sijasta voi olla mikä tahansa numero.

Olkoon annettu seuraava taulukko:

page.jsxlet prods = [
  {
    id: 1,
    name: 'tuote1',
    cost: 100,
  },
  {
    id: 2,
    name: 'tuote2',
    cost: 200,
  },
  {
    id: 3,
    name: 'tuote3',
    cost: 300,
  },
];

export default function Prod() {
  
}

Tee niin, että parametrin id arvosta riippuen komponentin renderöinnissä esitetään vastaava tuote.