Անթույլատրելի պարամետրի սխալ NextJS-ում

Նախորդ դասերում մենք տալիս էինք 404 սխալ այն դեպքում, երբ տվյալ URL-ի համար ռուտ չէր գտնվել: Սակայն, դինամիկ ռուտի դեպքում կարող է լինել այնպիսի իրավիճակ, երբ ռուտը գոյություն ունի, բայց պարամետրի արժեքը սխալ է:

Դիտարկենք օրինակով: Ենթադրենք մենք ունենք հետևյալ տեսքի ճանապարհ. /user/:id.

Ենթադրենք նաև, որ մենք ունենք օբյեկտ օգտատերերով.

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

Ենթադրենք, մենք ցանկանում ենք ցույց տալ օգտատիրոջը նրա id-ի համար.

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

Ակնհայտ է, որ URL-ի id-ն կարող է լինել ոչ ցանկացած, այլ միայն մեր օբյեկտի բանալիներից մեկը: Գոյություն չունեցող հասցեին /user/6 դիմելը պետք է հանգեցնի նրան, որ կտրվի սխալ: Եկեք ուղղենք մեր կոմպոնենտի կոդը և արտածենք սխալի տեքստը.

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

Սա, սակայն, բավարար չէ: Քանի որ այս դեպքում մենք դիմում ենք գոյություն չունեցող էջին, ուրեմն պետք է տանք HTTP կարգավիճակ 404: Դա արվում է հատուկ ֆունկցիայի notFound միջոցով, որը ներկառուցված է NextJS-ում:

Եկեք իմպորտենք այս ֆունկցիան.

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

Եվ հիմա կկանչենք այն այն դեպքում, երբ պարամետրի արժեքը անթույլատրելի է.

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

Մեր կոմպոնենտի ամբողջական կոդը կլինի հետևյալ տեսքի.

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