ဖြေရှင်းထားသည်- တုံ့ပြန်သည့် router 404 ကို ပြန်ညွှန်းသည်။

React Router 404 redirect နှင့်ပတ်သက်သော အဓိကပြဿနာမှာ ၎င်းကိုအကောင်အထည်ဖော်ရန် ခက်ခဲနိုင်သည်။ React Router တွင် built-in 404 စာမျက်နှာမရှိသောကြောင့် developer များသည် 404 စာမျက်နှာအတွက် လမ်းကြောင်းတစ်ခုကို ကိုယ်တိုင်ဖန်တီးပြီး ရှိပြီးသားလမ်းကြောင်းနှင့်မကိုက်ညီသည့် တောင်းဆိုမှုများကို ပြန်ညွှန်းရန်အတွက် router ကို configure လုပ်ရပါမည်။ ၎င်းသည် တစ်စုံတစ်ခု မှားယွင်းပါက အချိန်ကုန်ပြီး အမှားရှာရန် ခက်ခဲနိုင်သည့် အပိုကုဒ်နှင့် ဖွဲ့စည်းမှု လိုအပ်သည်။ ထို့အပြင်၊ အသုံးပြုသူတစ်ဦးသည် တည်ရှိခြင်းမရှိသော URL သို့ တိုက်ရိုက်သွားနေပါက၊ 404 စာမျက်နှာသို့ ပြန်ညွှန်းမည့်အစား အမှားစာမျက်နှာတစ်ခုကို မြင်တွေ့ရမည်ဖြစ်သည်။

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/about" component={About} />

      {/* 404 Redirect */}
      <Route render={() => (<Redirect to="/" />)} /> 

    </Switch>
  </Router>  
);

// Line 1- ဤလိုင်းသည် BrowserRouter၊ Route နှင့် Switch အစိတ်အပိုင်းများကို react-router-dom စာကြည့်တိုက်မှ တင်သွင်းသည်။

// Line 3- ဤစာကြောင်းသည် JSX ကို ပြန်ပေးသည့် App ဟုခေါ်သော လုပ်ဆောင်ချက်ကို သတ်မှတ်သည်။

// Lines 5-7- ဤလိုင်းများသည် app အစိတ်အပိုင်းကို react-router-dom မှ Router အစိတ်အပိုင်းတွင် ခြုံထားသည်။

// Lines 8-10- ဤလိုင်းများသည် Home နှင့် About အစိတ်အပိုင်းများအတွက် လမ်းကြောင်းနှစ်ခုကို အသီးသီးသတ်မှတ်သည်။

// လိုင်း 12- ဤလိုင်းသည် အခြားလမ်းကြောင်းနှင့် ကိုက်ညီမှုမရှိပါက ပင်မစာမျက်နှာသို့ ပြန်ညွှန်းသည့် လမ်းကြောင်းကို သတ်မှတ်သည်။

404 Error Code ဆိုတာဘာလဲ

React Router ရှိ 404 အမှားကုဒ်သည် တောင်းဆိုထားသော ရင်းမြစ်ကို ရှာမတွေ့ကြောင်း ညွှန်ပြသော HTTP အခြေအနေကုဒ်တစ်ခုဖြစ်သည်။ အသုံးပြုသူတစ်ဦးမှ တည်ရှိခြင်းမရှိသော စာမျက်နှာ သို့မဟုတ် လမ်းကြောင်းတစ်ခုကို ဝင်ရောက်ရန် ကြိုးပမ်းသည့်အခါ ၎င်းကို များသောအားဖြင့် ပြန်ပေးသည်။ အသုံးပြုသူသည် URL တစ်ခုကို မှားရိုက်မိပါက သို့မဟုတ် စာမျက်နှာအား လင့်ခ်များကို အပ်ဒိတ်မလုပ်ဘဲ ဖယ်ရှားခြင်း သို့မဟုတ် ရွှေ့ထားလျှင် ၎င်းသည် ဖြစ်ပေါ်နိုင်သည်။ ထိုသို့ဖြစ်ပေါ်သောအခါ၊ React Router သည် ၎င်းတို့၏အမှားကို သုံးစွဲသူအား အသိပေးသည့် သင့်လျော်သောမက်ဆေ့ချ်တစ်ခုဖြင့် ယေဘုယျ 404 စာမျက်နှာကို ပြသမည်ဖြစ်သည်။

404 redirect

React Router တွင်၊ 404 redirect သည် အသုံးပြုသူများ မမှန်ကန်သော URL ကိုဝင်ရောက်ရန်ကြိုးစားသောအခါ အခြားစာမျက်နှာတစ်ခုသို့ ပြန်ညွှန်းရန်နည်းလမ်းတစ်ခုဖြစ်သည်။ မှားယွင်းသော URL တစ်ခုကို ထည့်သောအခါ သို့မဟုတ် မရှိသော စာမျက်နှာကို ဝင်ရောက်ရန် ကြိုးစားသောအခါတွင် ၎င်းသည် အသုံးပြုသူများအား ပိုမိုကောင်းမွန်သော အတွေ့အကြုံကို ပေးစွမ်းနိုင်သည် ။ 404 redirect သည် Redirect Router မှ Redirect အစိတ်အပိုင်းကို အသုံးပြု၍ အကောင်အထည်ဖော်နိုင်ပြီး၊ သင်အသုံးပြုသူကို ပြန်ညွှန်းလိုသော စာမျက်နှာ၏ လမ်းကြောင်းအမည်ကို သတ်မှတ်ခွင့်ပြုသည်။ ဥပမာအားဖြင့်၊ တစ်စုံတစ်ယောက်သည် /invalid-url ကိုဝင်ရောက်ရန်ကြိုးစားပါက၊ သင်သည် ဤကဲ့သို့သော Redirect အစိတ်အပိုင်းကို အသုံးပြုနိုင်သည်။