ဖြေရှင်းနိုင်သည်- react router Link သည် အလုပ်လုပ်ပါသည်။

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

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

<Router>
  <div>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>

    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
  </div>
</Router>

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

2.
// ဤလိုင်းသည် ကျွန်ုပ်တို့၏ အပလီကေးရှင်းအတွက် လမ်းကြောင်းများဖန်တီးရန် အသုံးပြုမည့် Router အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးသည်။

3.

// ဤစာကြောင်းသည် ကျွန်ုပ်တို့၏လမ်းကြောင်းများနှင့် လင့်ခ်များအားလုံးကို ပါဝင်စေမည့် div ဒြပ်စင်တစ်ခု ဖန်တီးပေးသည်။

4. ပင်မစာမျက်နှာ
// ဤစာကြောင်းသည် 'Home' စာသားဖြင့် ကျွန်ုပ်တို့၏ အပလီကေးရှင်း၏ ပင်မစာမျက်နှာသို့ လင့်ခ်တစ်ခုကို ဖန်တီးပေးသည်။

5. အကြောင်းအရာ
// ဤစာကြောင်းသည် 'About' စာသားဖြင့် ကျွန်ုပ်တို့၏ အပလီကေးရှင်း၏ စာမျက်နှာသို့ လင့်ခ်တစ်ခု ဖန်တီးပေးသည်။

6.
// ဤစာကြောင်းသည် ကျွန်ုပ်တို့၏ အပလီကေးရှင်း၏ ပင်မစာမျက်နှာအတွက် လမ်းကြောင်းတစ်ခု ဖန်တီးပေးပြီး သုံးစွဲသူတစ်ဦးမှ ဝင်ရောက်သည့်အခါ ပင်မအစိတ်အပိုင်းကို တင်ဆက်ပေးသည်။

7. // ဤစာကြောင်းသည် ကျွန်ုပ်တို့၏ အပလီကေးရှင်း၏ စာမျက်နှာအတွက် လမ်းကြောင်းတစ်ခု ဖန်တီးပြီး အသုံးပြုသူတစ်ဦးမှ ဝင်ရောက်သည့်အခါ About အစိတ်အပိုင်းကို ပြန်ဆိုသည်။

8.

// ၎င်းသည် ကျွန်ုပ်တို့၏လမ်းကြောင်းများနှင့် လင့်ခ်များပါရှိသော ကျွန်ုပ်တို့၏ div ဒြပ်စင်ကို ပိတ်ပါသည်။

လင့်ခ် v6

Link v6 သည် React အပလီကေးရှင်းများအတွက် ကြေငြာနိုင်သော ဝင်ရောက်နိုင်သော လမ်းကြောင်းပြဖြေရှင်းချက်ကို ပံ့ပိုးပေးသည့် React Router တွင် အစိတ်အပိုင်းအသစ်တစ်ခုဖြစ်သည်။ ၎င်းသည် ယခင် Link အစိတ်အပိုင်းကို အစားထိုးပြီး ပိုမိုစွမ်းဆောင်နိုင်မှုနှင့် ဝင်ရောက်နိုင်မှုများအတွက် ပိုမိုကောင်းမွန်သော ပံ့ပိုးမှုပေးပါသည်။ Link v6 သည် ပုံမှန်လင့်ခ်များအပြင် ရွေ့လျားလမ်းကြောင်းလမ်းကြောင်း နှစ်ခုလုံးကို ပံ့ပိုးပေးသည်၊၊ developer များသည် လမ်းကြောင်းများကို ကိုယ်တိုင်စီမံခန့်ခွဲရန် သို့မဟုတ် ပြင်ပမှ ဒစ်ဂျစ်တိုက်များကို အသုံးမပြုဘဲ အားကောင်းမောင်းသန် လမ်းညွှန်မှုအတွေ့အကြုံများကို ဖန်တီးနိုင်စေပါသည်။ ၎င်းသည် ဆော့ဖ်ဝဲအင်ဂျင်နီယာများအား SEO-friendly အပလီကေးရှင်းများကို အားထုတ်မှုအနည်းဆုံးဖြင့် ဖန်တီးနိုင်စေသည့် server-side rendering ကိုလည်း ပံ့ပိုးပေးပါသည်။ နောက်ဆုံးတွင်၊ Link v6 တွင် ခွဲခြမ်းစိတ်ဖြာမှုခြေရာခံခြင်းအတွက် built-in ပံ့ပိုးမှုရှိပြီး၊ သင်၏အပလီကေးရှင်းနှင့် သုံးစွဲသူ အပြန်အလှန်တုံ့ပြန်မှုများကို ခြေရာခံရန် ပိုမိုလွယ်ကူစေသည်။

React Router Link ဘာကြောင့် အလုပ်မလုပ်တာလဲ။

React Router Link သည် React Router တွင် အလုပ်မလုပ်ရသည့် အကြောင်းရင်းများစွာရှိပါသည်။ အဖြစ်များဆုံးအကြောင်းရင်းမှာ ချိတ်ဆက်ထားသော အစိတ်အပိုင်းကို မှန်ကန်စွာဖွဲ့စည်းခြင်း သို့မဟုတ် စနစ်ထည့်သွင်းခြင်း မရှိခြင်းကြောင့်ဖြစ်သည်။ ဥပမာအားဖြင့်၊ ချိတ်ဆက်ထားသော အစိတ်အပိုင်းကို မှန်ကန်စွာ မတင်သွင်းပါက သို့မဟုတ် လမ်းကြောင်းလမ်းကြောင်း မမှန်ပါက၊ React Router Link အလုပ်မလုပ်ပါ။ ထို့အပြင်၊ လမ်းကြောင်းလမ်းကြောင်း သို့မဟုတ် အစိတ်အပိုင်းအမည်တွင် အမှားအယွင်းများရှိပါက၊ ၎င်းသည် React Router Link နှင့် ပြဿနာများကို ဖြစ်စေနိုင်သည်။ နောက်ဆုံးတွင်၊ လမ်းကြောင်းများစွာ (လမ်းကြောင်းနှစ်ခုကဲ့သို့ လမ်းကြောင်းနှစ်ခုကဲ့သို့) ကွဲလွဲမှုများရှိနေပါက၊ ၎င်းသည် React Router Link ကိုလည်း ပြဿနာများဖြစ်စေနိုင်သည်။

Related ရေးသားချက်များ:

a Comment ချန်ထား