ဖြေရှင်းထားသည်- url react router သို့ ကန့်သတ်ချက်များထည့်ခြင်း။

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

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. "react-router-dom" မှ { BrowserRouter ကို Router၊ Route, Link, useParams } အဖြစ် ထည့်သွင်းပါ။
// ဤကုဒ်တွင်အသုံးပြုမည့် react-router-dom စာကြည့်တိုက်မှ အစိတ်အပိုင်းများကို တင်သွင်းသည်။

2. // ၎င်းသည် မတူညီသောလမ်းကြောင်းများကြားတွင် လမ်းကြောင်းပြခြင်းကို ကိုင်တွယ်မည့် router အစိတ်အပိုင်းကို ဖန်တီးပေးသည်။

3. // ၎င်းသည် 'အသုံးပြုသူအမည်' ၏ ဒိုင်းနမစ်ပါရာမီတာဖြင့် လမ်းကြောင်းတစ်ခုကို ဖန်တီးသည်။

4. // ဤလမ်းကြောင်းကို လိုက်ဖက်သောအခါတွင် ၎င်းသည် အသုံးပြုသူ၏အစိတ်အပိုင်းကို ပြန်ဆိုသည်။

5. John // ၎င်းသည် /user/john လမ်းကြောင်းသို့ လင့်ခ်တစ်ခုကို ဖန်တီးပေးကာ အသုံးပြုသူအစိတ်အပိုင်းအား 'john' ဖြင့် ကလစ်နှိပ်သည့်အခါ အသုံးပြုသူအမည် ကန့်သတ်ချက်အဖြစ် ပြောင်းလဲပေးမည်ဖြစ်သည်။

6. လုပ်ဆောင်ချက် User() { //၎င်းသည် အသုံးပြုသူအမည်ကို အငြင်းအခုံတစ်ခုအဖြစ် ထည့်သွင်းကာ ၎င်းအပေါ်ရှိ Link ကိုနှိပ်ခြင်းဖြင့် ခေါ်သောအခါတွင် div tag များအတွင်း၌ ၎င်းကိုပြန်ဆိုပေးသည့် လုပ်ဆောင်ချက်ဆိုင်ရာ အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။

7. let { username } = useParams(); // ၎င်းသည် useParams() မှ အသုံးပြုသူအမည်သို့ ဝင်ရောက်ခွင့်ရရန် ဖျက်ဆီးခြင်းကို အသုံးပြုသည်။

8. ပြန်လာ (

); //၎င်းသည် အသုံးပြုသူအမည်သို့ ပေးပို့ထားသည့်တန်ဖိုးများပါရှိသော div ဒြပ်စင်ကို ပြန်ပေးသည်။ ဤကိစ္စတွင် 'john' ဖြစ်လိမ့်မည်။

React router ဆိုတာဘာလဲ

React Router သည် React အပလီကေးရှင်းများအတွက် လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် စာမျက်နှာတစ်ခုတည်း အက်ပ်လီကေးရှင်း (SPA) ဖန်တီးရန် လိုအပ်သော core အစိတ်အပိုင်းများနှင့် လုပ်ဆောင်ချက်များကို ပံ့ပိုးပေးပါသည်။ ၎င်းသည် ဆော့ဖ်ဝဲအင်ဂျင်နီယာများအား အပလီကေးရှင်းရှိ သီးခြားအစိတ်အပိုင်းများသို့ မြေပုံညွှန်းပေးသည့် လမ်းကြောင်းများဖြစ်သည့် လမ်းကြောင်းများကို သတ်မှတ်ခွင့်ပြုသည်။ React Router သည် ပြန်လည်ညွှန်ပြမှုများ၊ တက်ကြွသောလမ်းကြောင်းကိုက်ညီမှုနှင့် query parameters ကဲ့သို့သော အင်္ဂါရပ်များကို ပံ့ပိုးပေးပါသည်။

URL သို့ ကန့်သတ်ချက်များ

React Router ရှိ URL သို့ ကန့်သတ်ချက်များသည် developer များအား URL မှ dynamic data များကို React အစိတ်အပိုင်းများသို့ ပေးပို့ခွင့်ပြုသည်။ URL တွင်ပေးပို့သော ကန့်သတ်ဘောင်များအလိုက် မတူညီသောအကြောင်းအရာများကိုပြသရန်အတွက် အသုံးပြုနိုင်သည့် ရွေ့လျားလမ်းကြောင်းများဖန်တီးရာတွင် အသုံးဝင်သည်။ ဥပမာအားဖြင့်၊ “/user/:id” ကဲ့သို့သော လမ်းကြောင်းတစ်ခုကို URL တွင် ဖြတ်သွားသော ID ပါရာမီတာတစ်ခုနှင့်အတူ သုံးစွဲသူပရိုဖိုင်စာမျက်နှာကို ပြသရန် အသုံးပြုနိုင်သည်။ ဒေတာစစ်ထုတ်ခြင်း သို့မဟုတ် URL မှ ဒိုင်းနမစ်ဒေတာလိုအပ်သော အခြားလုပ်ဆောင်ချက်များအတွက် ပါရာမီတာများကိုလည်း အသုံးပြုနိုင်သည်။

React ရှိ URL တစ်ခုသို့ ဘောင်တစ်ခုကို မည်သို့ထည့်မည်နည်း။

React Router ရှိ URL တစ်ခုသို့ parameters များထည့်ခြင်းသည် "params" object ကို အသုံးပြု၍ လုပ်ဆောင်ပါသည်။ ဤအရာဝတ္တုသည် သင့်အား URL သို့ပေါင်းထည့်မည့် သော့တန်ဖိုးအတွဲများတွင် ဖြတ်သန်းခွင့်ပြုသည်။ ကန့်သတ်ဘောင်တစ်ခုထည့်ရန်၊ ၎င်းကို ဤကဲ့သို့သော params အရာဝတ္တုတွင် ရိုးရိုးရှင်းရှင်းထည့်ပါ။

const params = { param1: 'value1', param2: 'value2' };

ထို့နောက်၊ သင်၏လမ်းကြောင်းကိုဖန်တီးသောအခါ၊ သင်သည်ထိုကဲ့သို့သောအငြင်းအခုံအဖြစ် params အရာဝတ္ထုကိုဖြတ်သန်းနိုင်သည်-

ထို့နောက် ဤလမ်းကြောင်းသို့ သွားသည့်အခါ ကန့်သတ်ချက်များကို URL တွင် ထည့်သွင်းမည်ဖြစ်သည်။