React Router တွင် Not Found အမှားကို ကိုင်တွယ်ခြင်း

အက်ပ်တစ်ခု ဖန်တီးသည့်အခါ ၎င်း၏နောက်ပိုင်းအသုံးပြုမှုလုပ်ငန်းစဉ်အတွင်း ပေါ်ပေါက်လာမည့် အမျိုးမျိုးသော အမှားများကိုလည်း ဂရုပြုရန် လိုအပ်ပါသည်။ ဤသင်ခန်းစာတွင် အမှား 'Not Found' နှင့် အလုပ်လုပ်ရန် သင်ယူရမည်။ ထိုကဲ့သို့သော အမှားသည် ဥပမာအားဖြင့် အသုံးပြုသူသည် မရှိသောစာမျက်နှာသို့ ဦးတည်သော လင့်ခ်တစ်ခုကို နှိပ်မိပါက ပေါ်လာနိုင်ပါသည်။

စတင်ရန် ယခင်သင်ခန်းစာများတွင် ကျွန်ုပ်တို့လုပ်ခဲ့သော ကျွန်ုပ်တို့၏အက်ပ်ကို ဖွင့်ပြီး Root component ၏ markup ကို အစားထိုးကြပါစို့။ ယခု အက်ပ်ကို စတင်သည့်အခါ ထုတ်ကုန်နှစ်ခုပါသော စာရင်းတစ်ခုကို ကျွန်ုပ်တို့မြင်ရမည် -

routes/root.jsxfunction Root() {
  return (
    <nav>
      <a href={`/products/1`}>Product1</a>
      <a href={`/products/2`}>Product2</a>
    </nav>
  );
}

export default Root;

index.css ထဲတွင် style အနည်းငယ်ထည့်ကြပါစို့ -

index.cssbody {
  font-size: 18px;
  line-height: 1.5;
}

nav {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
  color: blue;
}

ယခု လင့်ခ်များကို နှိပ်ကြည့်ပါ။ ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအတွက် စာမျက်နှာများ၏ layout များ မရှိသောကြောင့် လင့်ခ်များသည် ကျွန်ုပ်တို့ကို အမှား '404 Not Found' ဖန်သားပြင်နှင့် React Router က ကျွန်ုပ်တို့အား ပုံသေထုတ်ပြသည်ထက် ပိုမိုလှပစိတ်ဝင်စားဖွယ် တစ်ခုခုကို ကျွန်ုပ်တို့ကိုယ်တိုင် စဉ်းစားနိုင်မည်ဟူသော ပြစ်တင်မှုသို့သာ ခေါ်ဆောင်သွားမည် ဖြစ်ပါသည်။

အမှား 404 ပေါ်လာသည့်အခါ မြင်ရမည့် ကျွန်ုပ်တို့ကိုယ်ပိုင် စာမျက်နှာတစ်ခု ဖန်တီးကြပါစို့။ ဤအတွက် src ဖိုဒါထဲတွင် ဖိုင်လေးတစ်ခု error-page-404.jsx ကို ဖန်တီးကြပါမည်။

React component ErrorPage404 အတွင်း၌ ကျွန်ုပ်တို့သည် console တွင် ထုတ်ပြမည့် အမှားကို ဖမ်းယူရန် hook useRouteError ကို အသုံးပြုမည် -

error-page-404.jsximport { useRouteError } from 'react-router-dom';

function ErrorPage404() {
  const error = useRouteError();
  console.error(error);

}

export default ErrorPage404;

ထို့နောက် component ErrorPage404 ၏ markup တွင် အမှားအကြောင်း အသိပေးသည့် ခေါင်းစဉ်နှစ်ခုကို ပြသပြီး object error ၏ properties များဖြစ်သော statusText နှင့် data ကို ထုတ်ပြမည် (object error နှင့် ၎င်း၏ properties များကို console ကိုဖွင့်ပြီး အက်ပ်ထဲရှိ ကျွန်ုပ်တို့၏ လင့်ခ်များကို နှိပ်လိုက်ပါက သင်မြင်တွေ့နိုင်ပါသည်)။

error-page-404.jsxreturn (
  <div>
    <h1>မင်္ဂလာပါ! ဒါကအမှားစာမျက်နှာပါ</h1>
    <h2>404 Not Found အမှား</h2>
    <p>
      <i>{error.statusText}</i>
    </p>
    <p>
      <i>{error.data}</i>
    </p>
  </div>
);

main.jsx ဖိုင်ကို ဖွင့်ပြီး ErrorPage404 နှင့် တစ်ကြောင်းထပ်တိုး import လုပ်ရန် မမေ့ပါနှင့် -

main.jsximport ErrorPage404 from './error-page-404';

ထို့အပြင် object Router ထဲတွင် property အသစ်တစ်ခု errorElement ကိုလည်း ထည့်ပါ - ဤ element သည် ဤ route တွင် အမှားတစ်ခု ဖြစ်ပေါ်လာသည့်အခါ ပြသပါသည်။ အမှား element ၏ တန်ဖိုးသည် ကျွန်ုပ်တို့၏ component ErrorPage404 ဖြစ်မည် -

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
  },
]);