ဖြေရှင်းထားသည်- react router v6 ဖြင့် ပြန်ညွှန်းသည်။

React Router v6 ဖြင့် redirect နှင့်ပတ်သက်သော အဓိကပြဿနာမှာ redirect လုပ်သည့်အခါတွင် component သည် re-render မလုပ်ခြင်းပင်ဖြစ်သည်။ ဆိုလိုသည်မှာ အစိတ်အပိုင်းနှင့် ဆက်စပ်နေသည့် မည်သည့်အခြေအနေ သို့မဟုတ် ကျားကွက်ကိုမဆို ပြန်လည်ညွှန်းပြခြင်း ဖြစ်ပေါ်လာသည့်အခါတွင် အပ်ဒိတ်လုပ်မည်မဟုတ်ကြောင်းနှင့် အဆိုပါတန်ဖိုးများအတွက် ပြောင်းလဲမှုမှန်သမျှကို စာမျက်နှာအသစ်တွင် ထင်ဟပ်စေမည်မဟုတ်ပါ။ ထို့အပြင်၊ React Router v6 သည် query strings များကို မပံ့ပိုးသောကြောင့်၊ URL တွင် ဖြတ်ထားသော မည်သည့် query parameters များကိုမဆို redirect လုပ်နေစဉ်အတွင်း ဆုံးရှုံးသွားမည်ဖြစ်ပါသည်။

import { Redirect } from "react-router-dom";

<Redirect to="/home" />

1. ဤလိုင်းသည် redirect-router-dom စာကြည့်တိုက်မှ လမ်းကြောင်းပြန်ညွှန်သည့် အစိတ်အပိုင်းကို တင်သွင်းသည်။

2. ဤစာကြောင်းသည် အသုံးပြုသူကို “/home” လမ်းကြောင်းသို့ ပြန်လည်ညွှန်းပေးမည့် Redirect အစိတ်အပိုင်းတစ်ခုကို တင်ဆက်ပေးပါသည်။

React Router v6 တွင် မည်သို့ပြန်ညွှန်းနိုင်မည်နည်း။

v6

React Router v6 ဟုခေါ်သော အစိတ်အပိုင်းအသစ်ကို ပံ့ပိုးပေးသည်။ အသုံးပြုသူများကို စာမျက်နှာတစ်ခုမှ အခြားစာမျက်နှာသို့ လမ်းကြောင်းလွှဲရန် အသုံးပြုနိုင်သည်။ ၎င်းကိုအသုံးပြုရန်၊ သင်သည် redirect-router-dom ပက်ကေ့ချ်မှ Redirect အစိတ်အပိုင်းကို တင်သွင်းပြီးနောက် သင်၏လမ်းကြောင်းဖွဲ့စည်းပုံတွင် ၎င်းကိုအသုံးပြုရန် လိုအပ်သည်။ အသုံးပြုသူတစ်ဦးသည် 'from' prop တွင်သတ်မှတ်ထားသောလမ်းကြောင်းကိုလည်ပတ်သောအခါ၊ ၎င်းတို့သည် 'to' prop တွင်သတ်မှတ်ထားသောလမ်းကြောင်းသို့ပြန်ညွှန်းမည်ဖြစ်သည်။ ဥပမာ:

'react-router-dom' မှ တင်သွင်းခြင်း { Redirect }
} />

အကောင့်ဝင်ပြီးနောက် react router v6 တွင် မည်သို့ပြန်ညွှန်းရမည်နည်း။

အောင်မြင်သော login ပြီးနောက် ပြန်ညွှန်းခြင်းသည် ဝဘ်အက်ပလီကေးရှင်းများတွင် သာမာန်လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည်။ React Router v6 တွင် သင်သည် ၎င်းကို အသုံးပြုနိုင်သည်။ အောင်မြင်စွာဝင်ရောက်ပြီးနောက်အသုံးပြုသူကိုပြန်လည်ညွှန်းရန်အစိတ်အပိုင်း။

၎င်းကိုလုပ်ဆောင်ရန်၊ အသုံးပြုသူသည် လော့ဂ်အင်ဝင်ထားခြင်းရှိမရှိ စစ်ဆေးပြီးနောက် ၎င်းတို့ကို လိုက်လျောညီထွေ ပြန်ညွှန်းပေးသည့် လမ်းကြောင်းတစ်ခုကို ဖန်တီးရန် လိုအပ်မည်ဖြစ်သည်။ ဥပမာ:

{
အကယ်၍ (isLoggedIn) {
ပြန်လာ ;
} သည်အခြား {
ပြန်လာ ;
}
}} />

ဤဥပမာတွင်၊ အသုံးပြုသူသည် လော့ဂ်အင်ဝင်ခြင်းရှိ၊ မရှိ စစ်ဆေးနေပြီး၊ ထို့နောက် LoginPage အစိတ်အပိုင်းကို တင်ဆက်ခြင်း သို့မဟုတ် ၎င်းတို့ကို /dashboard သို့ ပြန်ညွှန်းခြင်းတို့ကို စစ်ဆေးနေပါသည်။ သင်သည် ဤကဲ့သို့ Redirect အစိတ်အပိုင်းသို့ props များကို ပေးပို့နိုင်သည်။ ၎င်းသည် သင့်အား အသုံးပြုသူအား ၎င်းတို့အား ပြန်လည်ညွှန်းမပြမီ နေရာကို ခြေရာခံနိုင်စေမည်ဖြစ်သည်။

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

React Router သည် အချို့သော အခြေအနေများနှင့် ပြည့်မီသောအခါတွင် သုံးစွဲသူများအား အလိုအလျောက် ပြန်လည်လမ်းညွှန်ရန် အသုံးပြုနိုင်သည့် Redirect အစိတ်အပိုင်းကို ပံ့ပိုးပေးပါသည်။ ၎င်းကိုအသုံးပြုရန်၊ prop တစ်ခုအနေဖြင့် သင်ပြန်ညွှန်းလိုသောလမ်းကြောင်းကို ကျော်သွားရပါမည်။ လိုအပ်ပါက state နှင့်/သို့မဟုတ် query parameters များဖြင့် အရာဝတ္တုတစ်ခုကိုလည်း ဖြတ်သန်းနိုင်သည်။

အလိုအလျောက်ပြန်ညွှန်းရန်၊ သင်သည် လမ်းကြောင်းအစိတ်အပိုင်းတစ်ခုအတွင်း အစိတ်အပိုင်းကိုအသုံးပြုပြီး ပြန်လည်လမ်းညွှန်မှုဖြစ်ပေါ်လာသည့်အခါအတွက် အခြေအနေတစ်ခုကို သတ်မှတ်ရန် လိုအပ်မည်ဖြစ်သည်။ ဥပမာအားဖြင့်၊ သင်သည် သုံးစွဲသူများအား လင့်ခ်တစ်ခုကို နှိပ်ပြီးနောက် သင့်အပလီကေးရှင်း၏ ပင်မစာမျက်နှာမှ သုံးစွဲသူများအား လင့်ခ်တစ်ခုကို နှိပ်ပြီးနောက် လော့ဂ်အင်စာမျက်နှာသို့ ပြန်ညွှန်းလိုပါက၊ သင်သည် ဤကဲ့သို့ လုပ်ဆောင်နိုင်သည်-

{ဝင်ရောက်နေပြီလား? : }

ဤဥပမာတွင်၊ ကျွန်ုပ်တို့သည် redirection ကိုလုပ်ဆောင်ရမည့်အချိန်အတွက် ကျွန်ုပ်တို့၏အခြေအနေအဖြစ် isLoggedIn boolean variable (အခြားတစ်နေရာရာတွင် သတ်မှတ်ရန်လိုသည်) ကို အသုံးပြုနေပါသည်။ မှန်ပါက ကျွန်ုပ်တို့၏ မူလအစိတ်အပိုင်းကို တင်ဆက်ပါ။ သို့မဟုတ်ပါက၊ ကျွန်ုပ်တို့သည် ပြန်လည်လမ်းညွှန်မှုကို လုပ်ဆောင်သည်။

တုံ့ပြန်မှုတွင် 5 စက္ကန့်ကြာပြီးနောက် သင်မည်ကဲ့သို့ ပြန်ညွှန်းမည်နည်း။

React Router တွင် 5 စက္ကန့်ကြာပြီးနောက် ပြန်ညွှန်းရန်၊ သင်သည် ငြင်းခုံမှုတစ်ခုအနေဖြင့် history.push() နည်းလမ်းကို ခေါ်ရန် setTimeout() လုပ်ဆောင်ချက်ကို အသုံးပြုနိုင်သည်။

ဥပမာ:
“react-router-dom” မှ { useHistory } ကို တင်သွင်းပါ။
const history = useHistory();
setTimeout(() => {
history.push(“/redirectedPage”);
} ၁၀၀၀၀);