ဖြေရှင်းထားသည်- History React Router v6 အက်ပ်ကို သုံးပါ။

History React Router v6 ကို အသုံးပြုခြင်းနှင့် ပတ်သက်သည့် အဓိက ပြဿနာမှာ hash-based routing ကို မထောက်ပံ့ခြင်း ဖြစ်သည်။ ဆိုလိုသည်မှာ URL များအားလုံးသည် အကြွင်းမဲ့လမ်းကြောင်းများဖြစ်ရမည်၊ ၎င်းသည် အပလီကေးရှင်းကို စီမံခန့်ခွဲရန်နှင့် ထိန်းသိမ်းရန် ခက်ခဲစေနိုင်သည်။ ထို့အပြင်၊ စာမျက်နှာများစွာဖြင့် ရှုပ်ထွေးသော အပလီကေးရှင်းများကို ဖန်တီးရာတွင် ပြဿနာဖြစ်စေနိုင်သည့် ရွေ့လျားလမ်းကြောင်းများအတွက် built-in ပံ့ပိုးမှုမရှိပါ။ နောက်ဆုံးတွင်၊ History React Router v6 သည် အချို့သောကိစ္စများတွင် လိုအပ်ကောင်းလိုအပ်နိုင်သော်လည်း server-side rendering အတွက် မည်သည့်ပံ့ပိုးမှုမှ မပေးနိုင်ပါ။

import {
  BrowserRouter as Router,
  Switch,
  Route,
  useHistory,
} from "react-router-dom";

 function App() {

   const history = useHistory();

   // Handle a button click to push a new entry onto the history stack.
   function handleClick() {
     history.push("/new-location");
   }

   return (
     <div>      
       <button type="button" onClick={handleClick}>Go to New Location</button>       

       <Switch>        
         <Route path="/new-location">          
           <NewLocation />        
         </Route>      

       </Switch>    

     </div>   ); }

// ဤကုဒ်သည် BrowserRouter၊ Switch၊ Route နှင့် useHistory အစိတ်အပိုင်းများကို react-router-dom စာကြည့်တိုက်မှ တင်သွင်းသည်။
// ၎င်းသည် မှတ်တမ်းအရာဝတ္ထုတစ်ခုကို ဖန်တီးရန်အတွက် useHistory ချိတ်ကို အသုံးပြု၍ App ဟုခေါ်သော လုပ်ဆောင်ချက်ကို ဖန်တီးသည်။
// ဤမှတ်တမ်းအရာဝတ္တုကို ခေါ်သောအခါတွင် မှတ်တမ်းအစုအဝေးပေါ်သို့ ဝင်ခွင့်အသစ်တစ်ခုကို တွန်းပို့သည့် handleClick ဟုခေါ်သော လုပ်ဆောင်ချက်တွင် အသုံးပြုသည်။
// အက်ပ်လုပ်ဆောင်ချက်သည် နှိပ်သည့်အခါ handleClick ကိုခေါ်ဆိုသည့် onClick handler ပါရှိသော ခလုတ်တစ်ခုပါရှိသော JSX အချို့ကို ပြန်ပေးသည်။
// နောက်ဆုံးတွင်၊ ၎င်း၏လမ်းကြောင်းသည် “/new-location” နှင့် ကိုက်ညီသောအခါ NewLocation အစိတ်အပိုင်းကို ပြန်ဆိုပေးသည့် ၎င်း၏အတွင်း၌ လမ်းကြောင်းအစိတ်အပိုင်းတစ်ခုပါရှိသော Switch အစိတ်အပိုင်းတစ်ခုရှိသည်။

အသုံးပြုမှုသမိုင်းဆိုတာဘာလဲ

useHistory သည် React Router မှ ပံ့ပိုးပေးထားသည့် React Hook တစ်ခုဖြစ်ပြီး အစိတ်အပိုင်းများကို မှတ်တမ်းအရာဝတ္တုအား ပရိုဂရမ်ကျကျ သွားလာနိုင်ရန် ခွင့်ပြုပေးပါသည်။ တည်နေရာအသစ်များကို သမိုင်းအစုအဝေးသို့ တွန်းချရန်၊ လက်ရှိတည်နေရာကို အစားထိုးရန်၊ မှတ်တမ်းတွင် အသွားအပြန် စသည်တို့ကို အသုံးပြုနိုင်သည်။

လမ်းကြောင်းသမိုင်းကို ဘယ်လိုတုံ့ပြန်ရမလဲ

React Router တွင်၊ useHistory ချိတ်ကို အသုံးပြု၍ လမ်းကြောင်းမှတ်တမ်းကို သင်ရနိုင်သည်။ ဤချိတ်သည် သင့်အက်ပ်၏ မှတ်တမ်းတွင် သွားလာရန်၊ အပြန်ပြန်အလှန်လှန် အသုံးပြုနိုင်သည့် မှတ်တမ်းဖြစ်ရပ်နှင့် အခြားအရာများကို အသုံးပြုခွင့်ပေးသည်။ ၎င်းကိုအသုံးပြုရန်၊ React Router မှ ချိတ်ကို ရိုးရိုးရှင်းရှင်း တင်သွင်းပြီး သင်၏ အစိတ်အပိုင်းတွင် ၎င်းကို ခေါ်ပါ။

'react-router-dom' မှ { useHistory } ကို တင်သွင်းပါ။

const MyComponent = () => {
const history = useHistory();

// ယခု သင်သည် `history` အရာဝတ္ထုမှတစ်ဆင့် လမ်းကြောင်းမှတ်တမ်းကို ဝင်ရောက်ကြည့်ရှုနိုင်ပါပြီ။

ပြန်လာ (…);
}

Router သည် history API ကို အသုံးပြု၍ တုံ့ပြန်ပါသလား။

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