Nederīga parametra kļūda NextJS

Iepriekšējās nodarbībās mēs atgriezām 404 kļūdu gadījumā, kad šim URL netika atrasts neviens maršruts. Tomēr dinamiska maršruta gadījumā var rasties situācija, kad maršruts pastāv, bet parametra vērtība ir nepareiza.

Apskatīsim piemēru. Pieņemsim, ka mums ir šāda veida maršruts: /user/:id.

Pieņemsim arī, ka mums ir lietotāju objekts:

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

Pieņemsim, ka mēs vēlamies rādīt lietotāju pēc viņa id:

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

Acīmredzami, ka id URL nevar būt jebkurš, bet tikai viens no mūsu objekta atslēgām. Mēģinājums piekļūt ar neesošu adresi /user/6 jānoved pie kļūdas. Izlabosim mūsu komponenta kodu un izvadīsim kļūdas tekstu:

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

Tomēr ar to nepietiek. Galu galā šajā gadījumā mēs mēģinām piekļūt neesošai lapai, un tāpēc ir jāatgriež HTTP statuss 404. Tas tiek darīts, izmantojot īpašu funkciju notFound, kas ir iebūvēta NextJS.

Importēsim šo funkciju:

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

Un tagad izsauksim to gadījumā, ja parametra vērtība ir nekorekta:

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

Pilns mūsu komponenta kods izskatīsies šādi:

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();
  }
}