ဖြေရှင်းထားသည်- React Router v6 တွင် မည်သို့ပြန်ညွှန်းရမည်နည်း။

React Router v6 တွင် ပြန်ညွှန်းခြင်းဆိုင်ရာ အဓိကပြဿနာမှာ ပြန်ညွှန်းခြင်းများအတွက် syntax သည် ယခင်ဗားရှင်းများနှင့် သိသိသာသာ ပြောင်းလဲသွားခြင်းပင်ဖြစ်သည်။ v6 တွင်၊ Redirect component ကို the အစား အသုံးပြုရပါမည်။ ဒြပ်စင်၊ နှင့် to prop ကို pathname ပိုင်ဆိုင်မှုပါ ၀ င်သည့်အရာတစ်ခုဖြင့်ပေးရပါမည်။ ထို့အပြင်၊ state သို့မဟုတ် query parameters ကဲ့သို့သော နောက်ထပ် props များကို ဤ object တွင် ထည့်သွင်းရပါမည်။ ၎င်းသည် React Router ၏ အစောပိုင်းဗားရှင်းများ၏ ပိုမိုရိုးရှင်းသော syntax ကိုအသုံးပြုလေ့ရှိသော developer များအတွက် အခက်အခဲဖြစ်စေနိုင်သည်။

In React Router v6, you can use the <Redirect> component to redirect from one page to another.

Example: 

import { Redirect } from 'react-router-dom'; 
 
<Route exact path="/old-path"> 
   <Redirect to="/new-path" /> 
</Route>

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

2.
- ဤစာကြောင်းသည် “/old-path” ၏တိကျသောလမ်းကြောင်းဖြင့် လမ်းကြောင်းအစိတ်အပိုင်းတစ်ခုကို ဖန်တီးသည်။

3.
- ဤလိုင်းသည် “/old-path” မှ “/new-path” သို့ ပြန်ညွှန်းရန် Redirect component ကို အသုံးပြုသည်။

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

v6

React Router v6 သည် သုံးစွဲသူများကို စာမျက်နှာတစ်ခုမှ အခြားသို့ လမ်းကြောင်းပြောင်းရန် အသုံးပြုနိုင်သည့် Redirect အစိတ်အပိုင်းကို ပံ့ပိုးပေးပါသည်။ ပြန်ညွှန်းသည့် အစိတ်အပိုင်းကို အသုံးပြုရန်၊ ၎င်းကို react-router-dom ပက်ကေ့ခ်ျမှ ထည့်သွင်းရန် လိုအပ်သည်။ လမ်းကြောင်းပြန်ညွှန်ခြင်း အစိတ်အပိုင်းသည် ကျားကွက်နှစ်ခုကို ယူသည်- နှင့်မှ။ “from” prop သည် လက်ရှိစာမျက်နှာ၏ လမ်းကြောင်းဖြစ်ပြီး၊ “to” prop သည် အသုံးပြုသူများအား သင်ပြန်ညွှန်းလိုသော စာမျက်နှာ၏ လမ်းကြောင်းဖြစ်သည်။ ဥပမာအားဖြင့်၊ သင်သည် အသုံးပြုသူများကို /homepage မှ /about သို့ ပြန်ညွှန်းလိုပါက၊ သင့်ကုဒ်သည် ဤကဲ့သို့ဖြစ်နေလိမ့်မည်-

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

React router ဆိုတာဘာလဲ။

React Router သည် developer များအား လမ်းကြောင်းပြခြင်းနှင့် တက်ကြွသော၊ state-based routing တို့ဖြင့် စာမျက်နှာတစ်မျက်နှာရှိ အပလီကေးရှင်းများကို ဖန်တီးခွင့်ပြုသည့် React အတွက် လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် UI ကို URL နှင့် ထပ်တူကျစေရန် ကူညီပေးပြီး သုံးစွဲသူများအတွက် URL များကို မျှဝေရန်နှင့် မှတ်သားရန် ပိုမိုလွယ်ကူစေသည်။ React Router သည် ပျင်းရိသောဝန်တင်ခြင်း၊ လမ်းကြောင်းကာကွယ်ခြင်းနှင့် တည်နေရာအကူးအပြောင်းကိုင်တွယ်ခြင်းကဲ့သို့သော အစွမ်းထက်သောအင်္ဂါရပ်များကို ပေးပါသည်။

React အမျိုးအစားများ

React Router သည် လမ်းကြောင်းပြခြင်းနှင့် URL လမ်းကြောင်းဖြင့် စာမျက်နှာတစ်မျက်နှာရှိ အပလီကေးရှင်းများကို ဖန်တီးရန် developer များအား React အတွက် လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် Router အမျိုးအစားသုံးမျိုး ထောက်ပံ့ပေးသည်- BrowserRouter၊ HashRouter နှင့် MemoryRouter။

BrowserRouter- ဤရောက်တာသည် သင်၏ UI ကို URL နှင့် ထပ်တူပြုထားရန် HTML5 မှတ်တမ်း API ကို အသုံးပြုသည်။ သင့်အပလီကေးရှင်းရှိ URL အစစ်အမှန်များကို အသုံးပြုလိုသည့်အခါ ၎င်းကိုအသုံးပြုသည်။

HashRouter- ဤရောက်တာသည် သင့် UI ကို URL နှင့် ထပ်တူပြုထားရန် URL ၏ hash အပိုင်းကို အသုံးပြုသည်။ URL အစစ်အမှန်များကို မသုံးချင်သည့်အခါ သို့မဟုတ် HTML5 history API ကို မပံ့ပိုးသော ဘရောက်ဆာအဟောင်းများနှင့် လိုက်ဖက်ညီမှု လိုအပ်သည့်အခါ ၎င်းကို အသုံးပြုသည်။

MemoryRouter- ဤရောက်တာသည် မှတ်ဉာဏ်ထဲတွင် တည်နေရာမှတ်တမ်းကို ထိန်းသိမ်းထားပြီး ဘရောက်ဆာ၏လိပ်စာဘားနှင့် တုံ့ပြန်မှုမပြုပါ သို့မဟုတ် URL အစစ်အမှန်များကို ဖန်တီးပါ။ စမ်းသပ်ရန် ရည်ရွယ်ချက်များ သို့မဟုတ် အစစ်အမှန် URLs များကို အသုံးပြု၍ မလိုလားအပ်သော ပတ်ဝန်းကျင်အတွက် အသုံးဝင်သည် (ဥပမာ၊ ဆာဗာဘက်သို့ တင်ဆက်ခြင်း)။