Kehtetu parameetri viga NextJS-is

Eelmistes õppetundides andsime 404 vea juhul, kui URL-i vastavat ruuti ei leitud. Siiski, dünaamilise ruudi puhul võib esineda olukord, kus ruut on olemas, kuid parameetri väärtus on vale.

Vaatame seda näite varal. Olgul meil järgmise kujuga marsruut: /user/:id.

Olgul meil samuti kasutajate objekt:

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

Oletame, et tahame näidata kasutajat tema id järgi:

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

On ilmne, et URL-is olev id ei saa olla suvaline, vaid peab olema üks meie objekti võtmetest. Katse avada olematut aadressi /user/6 peaks viima vea kuvamiseni. Parandame oma komponendi koodi ja kuvame veateksti:

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

See siiski ei piisa. Sellisel juhul me ju pöördume olematu lehe poole, seega peaksime andma HTTP staatuse 404. Seda tehakse spetsiaalse funktsiooniga notFound, mis on sisseehitatud NextJS-i.

Impordime selle funktsiooni:

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

Ja nüüd kutsume seda välja juhul, kui parameetri väärtus on vigane:

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

Meie komponendi täielik kood on järgmine:

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