Virheellisen parametrin virhe NextJS:ssä

Edellisissä oppitunneissa annoimme 404 -virheen tapauksessa, jossa reittiä tietylle URL-osoitteelle ei löytynyt. Kuitenkin dynaamisessa reitissä voi olla tilanne, jossa reitti on olemassa, mutta parametrin arvo on väärä.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on reitti seuraavasta muodosta: /user/:id.

Oletetaan myös, että meillä on käyttäjäolio:

app/user/[id]/page.jsxlet users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

Oletetaan, että haluamme näyttää käyttäjän hänen id:nsä perusteella:

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

On selvää, että id URL-osoitteessa voi olla ei mikä tahansa, vaan vain yksi avaimistamme meidän oliossamme. Yritys päästä käsiksi olematonta osoitetta /user/6 kohtaan pitäisi johtaa siihen, että annetaan virhe. Korjataan komponenttimme koodi ja tulostetaan virheteksti:

app/user/[id]/page.jsxexport default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return <p>
      käyttäjää ei löytynyt
    </p>;
  }
}

Tämä ei kuitenkaan riitä. Loppujen lopuksi tässä tapauksessa päättelemme olematonta sivua, ja siksi meidän pitäisi antaa HTTP-tila 404. Tämä tehdään käyttämällä erityistoimintoa notFound, joka on sisäänrakennettu NextJS:ään.

Tuodaan tämä toiminto:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

Ja nyt kutsumme sitä tapauksessa, jossa parametrin arvo on virheellinen:

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

Komponenttimme täydellinen koodi näyttää seuraavalta:

app/user/[id]/page.jsximport { notFound } from 'next/navigation';

let users = {
  1: 'user1',
  2: 'user2',
  3: 'user3',
  4: 'user4',
  5: 'user5',
};

export default function User({ params }) {
  if (users[params.id]) {
    return <p>
      { users[params.id] }
    </p>;
  } else {
    return notFound();
  }
}