ဖြေရှင်းထားသည်- activeClassName တုံ့ပြန်သည့်ရောက်တာ

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

<Router>
  <Link to="/about" activeClassName="active">About</Link>
</Router>

1 ။ အဆိုပါ အသုံးပြုသူများကို မတူညီသော စာမျက်နှာများကြားတွင် သွားလာခွင့်ပြုသည့် React တွင် router တစ်ခုကို ဖန်တီးရန် အစိတ်အပိုင်းကို အသုံးပြုသည်။

2 ။ အဆိုပါ ကွန်ပြူတာအား နှိပ်လိုက်သောအခါတွင် အသုံးပြုသူကို “to” attribute တွင် သတ်မှတ်ထားသည့် စာမျက်နှာသို့ ခေါ်ဆောင်သွားမည်ဖြစ်ပြီး (ဤကိစ္စတွင်၊ “/about”) ကို ဖန်တီးရန် အစိတ်အပိုင်းကို အသုံးပြုသည်။

3. activeClassName ရည်ညွှန်းချက်သည် လင့်ခ်သည် အသက်ဝင်နေချိန်တွင် မည်သည့်အတန်းကို အသုံးချသင့်သည်ကို သတ်မှတ်သည် (ဤကိစ္စတွင်၊ "active")။

NavLink ဆိုတာဘာလဲ

NavLink သည် အပလီကေးရှင်းတစ်ခုရှိ မတူညီသောလမ်းကြောင်းများကြားတွင် လမ်းကြောင်းပြလင့်ခ်တစ်ခုဖန်တီးရန် React Router တွင်အသုံးပြုသည့် React အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။ ၎င်းသည် Link အစိတ်အပိုင်းနှင့် ဆင်တူသော်လည်း ၎င်းသည် လက်ရှိ URL နှင့် ကိုက်ညီသောအခါတွင် တင်ဆက်ထားသော ဒြပ်စင်သို့ စတိုင်လ်ပုံစံကို ထည့်သွင်းထားသည်။ NavLink သည် လင့်ခ်၏ လမ်းကြောင်းကို တက်ကြွနေချိန်တွင် အတန်းအမည်တစ်ခုကို အသုံးချရန် အသုံးပြုနိုင်သည့် activeClassName prop ကိုလည်း ပံ့ပိုးပေးပါသည်။

activeClassName ရည်ညွှန်းချက်

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

အဘယ်ကြောင့် activeClassName အလုပ်မလုပ်သနည်း။

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