NextJS တွင် မမှန်ကန်သော parameter အမှား

ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့သည် ပေးထားသော URL အတွက် route မတွေ့ပါက 404 အမှားကို ပြန်ပေးခဲ့ပါသည်။ သို့သော်၊ dynamic route ၏အခြေအနေတွင် route ရှိသော်လည်း parameter ၏တန်ဖိုးသည် မမှန်ကန်နိုင်သည့် အခြေအနေရှိနိုင်သည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ရှုကြပါစို့။ ကျွန်ုပ်တို့တွင် အောက်ပါပုံစံရှိသော route /user/:id ရှိသည်ဆိုပါစို့။

ထို့အပြင် ကျွန်ုပ်တို့တွင် user များပါဝင်သော object တစ်ခုလည်း ရှိသည်ဆိုပါစို့။

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

ကျွန်ုပ်တို့သည် user ၏ id ဖြင့် ထို user ကို ပြသလိုသည်ဆိုပါစို့။

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

မှန်ပါသည်၊ URL ရှိ id သည် မည်သည့်တန်ဖိုးမဆို မဖြစ်နိုင်ဘဲ ကျွန်ုပ်တို့၏ object ၏ key များထဲမှ တစ်ခုသာ ဖြစ်ရပါမည်။ မရှိသော လိပ်စာ /user/6 သို့ ဝင်ရောက်ကြည့်ရှုရန် ကြိုးပမ်းခြင်းသည် �မှားတစ်ခု ပြသခြင်းသို့ ဦးတည်သင့်ပါသည်။ ကျွန်ုပ်တို့၏ component ၏ code ကို ပြင်ဆင်ပြီး အမှားစာသားကို ပြသကြပါစို့။

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 status 404 ကို ပြန်ပေးသင့်ပါသည်။ ဤသို့ပြုလုပ်ရန် NextJS တွင် တည်ဆောက်ပြီးသား အထူးလုပ်ဆောင်ချက် notFound ကို အသုံးပြုပါသည်။

ထိုလုပ်ဆောင်ချက်ကို import လုပ်ကြပါစို့။

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

ယခုတွင် parameter ၏တန်ဖိုးသည် မမှန်ကန်သောအခါ ၎င်းကို ခေါ်ယူသုံးစွဲပါမည်။

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

ကျွန်ုပ်တို့၏ component ၏ code အပြည့်အစုံသည် အောက်ပါအတိုင်း ဖြစ်လိမ့်မည်။

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