ဖြေရှင်းထားသည်- url react router dom v6 မှ query ကို ရယူပါ။

URL React Router DOM v6 မှ query ကိုရယူခြင်းနှင့်ဆိုင်သော အဓိကပြဿနာမှာ query parameters များကိုဝင်ရောက်ရန် built-in နည်းလမ်းမပေးထားခြင်းကြောင့်ဖြစ်သည်။ ယင်းအစား၊ developer များသည် URL စာကြောင်းကို ကိုယ်တိုင်ခွဲခြမ်းစိတ်ဖြာပြီး query parameters များကို ၎င်းတို့ကိုယ်တိုင် ထုတ်ယူရမည်ဖြစ်သည်။ ၎င်းသည် ပျင်းစရာကောင်းသော လုပ်ငန်းစဉ်တစ်ခု ဖြစ်နိုင်ပြီး မှန်ကန်စွာ မလုပ်ဆောင်ပါက အမှားအယွင်းများ ဖြစ်ပေါ်လာနိုင်သည်။ ထို့အပြင်၊ URL ဖွဲ့စည်းပုံပြောင်းလဲပါက၊ ကုဒ်ကို လိုက်လျောညီထွေ မွမ်းမံပြင်ဆင်ရန် လိုအပ်ပါသည်။

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

const MyComponent = () => {
  const location = useLocation();

  const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>My Component</h1>
      <p>Query Param: {queryParams.get("myParam")}</p>
    </div>
  );  
};

1. "react-router-dom" မှ { useLocation } ကို တင်သွင်းပါ။" - ဤလိုင်းသည် react-router-dom စာကြည့်တိုက်မှ useLocation ချိတ်ကို တင်သွင်းသည်။
2. “const MyComponent = () => {” – ဤစာကြောင်းသည် MyComponent ဟုခေါ်သော လုပ်ဆောင်ချက်တစ်ခုကို ကြေငြာပြီး React အစိတ်အပိုင်းတစ်ခုကို ပြန်ပေးမည်ဖြစ်သည်။
3. “const တည်နေရာ = useLocation();” - ဤစာကြောင်းသည် အပလီကေးရှင်း၏ လက်ရှိတည်နေရာ (ဥပမာ၊ URL) အကြောင်း အချက်အလက်ကို ရယူရန် တင်သွင်းထားသော useLocation ချိတ်ကို အသုံးပြုသည်။
4. “const queryParams = new URLSearchParams(location.search);” - ဤစာကြောင်းသည် လက်ရှိ URL တွင် မေးမြန်းမှု ကန့်သတ်ချက်များ အားလုံးကို ပါ၀င်သည့် အရာတစ်ခု (ဥပမာ၊ ?myParam=foo) ဖန်တီးသည်။
5. ကျန်သောကုဒ်သည် URL မေးမြန်းမှုစာကြောင်းတွင် myParam ၏တန်ဖိုးကိုပြသသည့် h1 နှင့် p tag ဖြင့် React အစိတ်အပိုင်းကို ပြန်ပေးခြင်းဖြစ်သည်။

React router Dom

React Router DOM သည် developer များအား ၎င်းတို့၏ React အပလီကေးရှင်းအတွင်း လမ်းကြောင်းများဖန်တီးရန်နှင့် စီမံခန့်ခွဲရန်ခွင့်ပြုသော React အတွက် လမ်းကြောင်းပြစာကြည့်တိုက်တစ်ခုဖြစ်သည်။ ၎င်းသည် အက်ပလီကေးရှင်းကို သွားလာရန် API တစ်ခု ပံ့ပိုးပေးကာ လမ်းကြောင်းများကို သတ်မှတ်ခြင်း၊ လက်ရှိ URL ကို အခြေခံ၍ အစိတ်အပိုင်းများကို တင်ဆက်ရန်နှင့် အပလီကေးရှင်း၏ မတူညီသော အစိတ်အပိုင်းများကြားတွင် ချိတ်ဆက်မှုတို့ကို ခွင့်ပြုပေးပါသည်။ ၎င်းသည် ဒိုင်းနမစ်လမ်းကြောင်းကိုက်ညီမှု၊ တည်နေရာခြေရာခံခြင်းနှင့် လမ်းညွှန်မှုအစောင့်များကဲ့သို့သော အင်္ဂါရပ်များကို ပံ့ပိုးပေးသည်။

react v6 router တွင် query string ကို မည်သို့ရယူရမည်နည်း။

v6

React Router v6 တွင်၊ useLocation ချိတ်ကို အသုံးပြု၍ query string parameters များကို သင်ဝင်ရောက်နိုင်သည်။ ဤချိတ်သည် လမ်းကြောင်းအမည်၊ ရှာဖွေမှု၊ hash နှင့် နိုင်ငံတော်ဂုဏ်သတ္တိများ အပါအဝင် လက်ရှိ URL နှင့်ပတ်သက်သည့် အချက်အလက်ပါရှိသော တည်နေရာအရာဝတ္တုကို ပြန်ပေးသည်။ ရှာဖွေမှုပိုင်ဆိုင်မှုတွင် စာကြောင်းတစ်ကြောင်းအဖြစ် မေးမြန်းချက်စာကြောင်းပါရာမီတာများပါရှိသည်။ ထို့နောက် သင်သည် query string parameters များအားလုံးကို ပါဝင်သော အရာတစ်ခုကို ရရှိရန် ဤစာကြောင်းကို ခွဲခြမ်းစိတ်ဖြာနိုင်ပါသည်။
ဥပမာ:
const {ရှာဖွေမှု} = useLocation();
const params = အသစ် URLSearchParams(ရှာဖွေမှု);
const param1 = params.get('param1');