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

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

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

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

ဤကုဒ်သည် URL မှ အသုံးပြုသူအမည်ဖြင့် စာမျက်နှာတစ်ခုကို တင်ဆက်ရန် React Router ကို စနစ်ထည့်သွင်းနေပါသည်။

1. ပထမစာကြောင်းသည် React Router DOM စာကြည့်တိုက်မှ အစိတ်အပိုင်းများကို တင်သွင်းသည်။
2. အက်ပ်လုပ်ဆောင်ချက်သည် “/user/” နှင့်အစရှိသည့် မည်သည့် URL မဆို UserPage အစိတ်အပိုင်းကို တင်ဆက်သင့်သည်ဟု သတ်မှတ်ပေးသည့် အထဲမှာ လမ်းကြောင်းအစိတ်အပိုင်းတစ်ခုဖြင့် Router အစိတ်အပိုင်းကို ပြန်ပေးသည်။
3. UserPage လုပ်ဆောင်ချက်သည် URL မှအသုံးပြုသူအမည်ကိုရယူရန် useParams() ကိုအသုံးပြုပြီး ထိုအသုံးပြုသူအမည်ကိုအသုံးပြု၍ နှုတ်ခွန်းဆက်စကားပြန်ဆိုသည်။

URL ဘောင်များ

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

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

React Router တွင်၊ useParams ချိတ်ကို အသုံးပြု၍ လမ်းကြောင်းတစ်ခုမှ URL ဘောင်များကို သင်ဝင်ရောက်နိုင်သည်။ ဤချိတ်သည် URL ကန့်သတ်ဘောင်များ၏ သော့တန်ဖိုးအတွဲများပါရှိသော အရာတစ်ခုကို ပြန်ပေးသည်။ ဥပမာအားဖြင့်၊ သင့်လမ်းကြောင်းသည် /user/:id ဖြစ်ပါက၊ သင်သည် useParams().id ဖြင့် id ဘောင်ကို ဝင်ရောက်နိုင်သည်။