ဖြေရှင်းထားသည်- react router reload page ကို ရှာမတွေ့ပါ။

React Router reload page နှင့်ပတ်သက်သည့် အဓိကပြဿနာမှာ အသုံးပြုသူတစ်ဦးသည် စာမျက်နှာကို ပြန်လည်စတင်သောအခါတွင်၊ browser သည် လက်ရှိ URL အတွက် ဆာဗာထံ တောင်းဆိုချက်တစ်ခုပြုလုပ်ရန် ကြိုးပမ်းလိမ့်မည်ဖြစ်သည်။ သို့သော်လည်း React Router သည် client-side routing ဖြစ်သောကြောင့်၊ URL အတွက် သက်ဆိုင်ရာ server လမ်းကြောင်းမရှိသဖြင့် 404 Not Found error ကို ပြန်ပေးပါသည်။ ပြန်လည်ဆန်းသစ်ခြင်းတွင် အချို့သောအကြောင်းအရာများကို အသုံးပြုသူများက မျှော်လင့်နေပါက၊ ၎င်းသည် အထူးသဖြင့် ပြဿနာရှိနိုင်သည်။

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

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

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

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

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

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

// Line 6- ဤလိုင်းသည် react-router-dom မှ Switch အစိတ်အပိုင်းတစ်ခုတွင် လမ်းကြောင်းအားလုံးကို ခြုံထားသည်။

// Lines 7 – 9: ဤလိုင်းများသည် '/' နှင့် '/about' အတွက် လမ်းကြောင်းနှစ်ခုကို ၎င်းတို့၏ သက်ဆိုင်ရာ အစိတ်အပိုင်းများ (Home and About) ဖြင့် အသီးသီး သတ်မှတ်သည်။

// Lines 11 – 12: ဤလိုင်းများသည် အခြားလမ်းကြောင်းများနှင့် ကိုက်ညီမှုမရှိသည့်အခါတွင် လမ်းကြောင်းတစ်ခုသတ်မှတ်ပေးသည်၊ ၎င်းသည် h1 တက်ဂ်တစ်ခုအား “Page not found” ဟုဖော်ပြသည်။

စာမျက်နှာ အမှားမတွေ့ပါ။

React Router ရှိ စာမျက်နှာမတွေ့ရှိသော အမှားသည် အသုံးပြုသူမရှိသော စာမျက်နှာ သို့မဟုတ် လမ်းကြောင်းတစ်ခုသို့ ဝင်ရောက်ရန် ကြိုးပမ်းသည့်အခါ ဖြစ်ပေါ်လာသည့် အမှားတစ်ခုဖြစ်သည်။ အသုံးပြုသူသည် URL ကို မှားရိုက်မိပါက သို့မဟုတ် ၎င်းတို့ဝင်ရောက်ရန် ကြိုးစားနေသည့် စာမျက်နှာကို ဖယ်ရှားခြင်း သို့မဟုတ် ရွှေ့ထားလျှင် ၎င်းသည် ဖြစ်နိုင်သည်။ React Router တွင်၊ ဤအမှားကို အသုံးပြု၍ ကိုင်တွယ်သည်။ အစိတ်အပိုင်း၏ render prop နှင့် passing သည် 404 စာမျက်နှာကိုပြန်ပေးသည့်လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည်။ ၎င်းသည် ဆော့ဖ်ဝဲအင်ဂျင်နီယာများအား အထောက်အကူဖြစ်စေသောလင့်ခ်များ သို့မဟုတ် တောင်းပန်စာမက်ဆေ့ချ်ကဲ့သို့သော စိတ်ကြိုက်အကြောင်းအရာ 404 စာမျက်နှာများကို ဖန်တီးနိုင်စေမည်ဖြစ်သည်။

React router တွင် ရှာမတွေ့သော Page ကို ဘယ်လိုကိုင်တွယ်ရမလဲ

React Router ကိုအသုံးပြုသည့်အခါ၊ URL သည် ရှိပြီးသားလမ်းကြောင်းများနှင့် မကိုက်ညီသောအခါတွင် NotFound အစိတ်အပိုင်းတစ်ခုကို တင်ဆက်ပေးမည့် စိတ်ကြိုက်လမ်းကြောင်းတစ်ခုကို ဖန်တီးခြင်းဖြင့် မတွေ့နိုင်သော စာမျက်နှာတစ်ခုကို ကိုင်တွယ်နိုင်ပါသည်။ ဒါကိုလုပ်ဖို့၊ "*" သတ်မှတ်ထားတဲ့ လမ်းကြောင်းနဲ့အတူ လမ်းကြောင်းအသစ်တစ်ခုကို ဖန်တီးပြီး သင့် NotFound အစိတ်အပိုင်းကို ပြန်လုပ်ရပါမယ်။

ဥပမာ:

} />

၎င်းသည် ရှိပြီးသားလမ်းကြောင်းတစ်ခုနှင့် မကိုက်ညီသည့် မည်သည့် URL ကိုမဆို ကိုက်ညီပြီး သင်၏ NotFound အစိတ်အပိုင်းကို တင်ဆက်ပေးပါမည်။

တုံ့ပြန်သည့်စာမျက်နှာကို ပြန်လည်စတင်ရန် မည်သို့တွန်းအားပေးရမည်နည်း။

React Router တွင်၊ သမိုင်းအရာဝတ္တုပေါ်ရှိ အစားထိုးနည်းလမ်းကို အသုံးပြု၍ စာမျက်နှာတစ်ခုကို ပြန်လည်စတင်ရန် သင့်အား တွန်းအားပေးနိုင်သည်။ ၎င်းသည် မှတ်တမ်းအစုအတွင်းရှိ လက်ရှိထည့်သွင်းမှုကို အသစ်တစ်ခုဖြင့် အစားထိုးမည်ဖြစ်ပြီး၊ ထို့ကြောင့် စာမျက်နှာကို ပြန်လည်စတင်ရန် ခိုင်းစေမည်ဖြစ်သည်။ ဤနည်းလမ်းကိုအသုံးပြုရန်၊ သင်သည် မှတ်တမ်းအရာဝတ္တုသို့ ဦးစွာဝင်ရောက်ခွင့်ရရန် လိုအပ်သည်။ သင့် router အစိတ်အပိုင်းကို ဖန်တီးသည့်အခါ ၎င်းကို prop အဖြစ်ဖြတ်သန်းခြင်းဖြင့် ၎င်းကို သင်လုပ်ဆောင်နိုင်သည်-

const AppRouter = () => (

{/* မင်းရဲ့လမ်းကြောင်းတွေက ဒီမှာ */}

);

မှတ်တမ်းအရာဝတ္တုကို သင်ဝင်ရောက်ခွင့်ရပြီးသည်နှင့် ၎င်းကဲ့သို့သော ၎င်း၏အစားထိုးနည်းလမ်းကို သင်အသုံးပြုနိုင်သည်-

history.replace('/some-route');