NextJS හි වලංගු නොවන පරාමිතිය දෝෂය

පෙර පාඩම්වලදී, යම් URL සඳහා රූටය නොමැති විට අපි 404 දෝෂය ලබා දුන්නෙමු. කෙසේ වෙතත්, ගතික රූටයක් සම්බන්ධයෙන් රූටය පවතින නමුත් පරාමිති අගය වැරදි වන සංගතියක් ඇති විය හැකිය.

අපි උදාහරණයක් දෙස බලමු. අප සතුව පහත ආකාරයේ මාර්ගයක් ඇතැයි සිතමු: /user/:id.

අප සතුව පරිශීලකයන් සමඟ වස්තුවක් ද ඇතැයි සිතමු:

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

අපි එහි අයිඩීය අනුව පරිශීලකයා පෙන්වීමට අවශ්‍ය යැයි සිතමු:

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

පැහැදිලිවම, URL හි අයිඩීය ඕනෑම එකක් නොව අපගේ වස්තුවේ යතුරු වලින් එකක් පමණක් විය යුතුය. නොපවතින ලිපිනයකට ප්‍රවේශ වීමේ උත්සාහය /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 ලබා දිය යුතුය. මෙය NextJS හි අන්තර්ගත විශේෂ කාර්යය notFound භාවිතයෙන් සිදු කරයි.

අපි මෙම කාර්යය ආයාත කරමු:

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