ဖြေရှင်းထားသည်- ပုံသဏ္ဍာန်ပုံစံများကို အသုံးပြု၍ router ကို တုံ့ပြန်ပါ။

React Router ဖြင့် တည်ငြိမ်စတိုင်များကို အသုံးပြုခြင်းနှင့် ပတ်သက်သည့် အဓိကပြဿနာမှာ မတူညီသောလမ်းကြောင်းများနှင့် ၎င်းတို့၏ဆက်စပ်စတိုင်များကို ခြေရာခံရန် ခက်ခဲနိုင်သည်။ တည်ငြိမ်သောပုံစံများဖြင့်၊ လမ်းကြောင်းတစ်ခုစီတွင် ၎င်း၏ကိုယ်ပိုင် CSS စည်းမျဉ်းများပါရှိရန် လိုအပ်ပြီး လျင်မြန်စွာ မလှုပ်မယှက်ဖြစ်လာပြီး ထိန်းသိမ်းရခက်နိုင်သည်။ ထို့အပြင်၊ စတိုင်တစ်ခုအား လမ်းကြောင်းများစွာတွင် အသုံးပြုပါက၊ ၎င်းကို ၎င်းတို့အားလုံးတွင် ထပ်တူပွားထားရန် လိုအပ်ပြီး ကုဒ်ကို ခြောက်သွေ့အောင်ထားရန် ခက်ခဲစေသည် (သင့်ကိုယ်သင် ထပ်တလဲလဲ မလုပ်ပါနှင့်)။

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import styled from 'styled-components';
 
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;

  &:hover {
    color: white;
    text-decoration: none;  
  }  
`;

 const App = () => (   <Router>     <div>       <ul>         <li><StyledLink to="/">Home</StyledLink></li>         <li><StyledLink to="/about">About</StyledLink></li>       </ul>       <hr />       <Route exact path="/" component={Home} />       <Route path="/about" component={About} />     </div>   </Router>) ;

 const Home = () => (   <div>     <h2>Home</h2>   </div>) ;

 const About = () => (   <div>     <h2>About</h2>   </div>) ;

 export default App;

1. ပထမစာကြောင်းသည် React စာကြည့်တိုက်ကို တင်သွင်းသည်။
2. ဒုတိယလိုင်းသည် BrowserRouter၊ Route နှင့် Link အစိတ်အပိုင်းများကို react-router-dom စာကြည့်တိုက်မှ တင်သွင်းသည်။
3. တတိယစာကြောင်းသည် ပုံစံလုပ်ထားသော အစိတ်အပိုင်းကို စတိုင်လုပ်ထားသော အစိတ်အပိုင်းများကို ဒစ်ဂျစ်တိုက်မှ တင်သွင်းသည်။
4. စတုတ္ထစာကြောင်းသည် react-router-dom မှတင်သွင်းသော Link အစိတ်အပိုင်းကို အသုံးပြု၍ StyledLink အစိတ်အပိုင်းကို ဖန်တီးပြီး ၎င်းကို အရောင်- palevioletred နှင့် font-weight- bold၊ အပြင် ၎င်း၏အရောင်ကို အဖြူရောင်အဖြစ် ပြောင်းလဲကာ မည်သည့်စာသားကိုမဆို ဖယ်ရှားသည့် စာသားကို ဖယ်ရှားသည့် အပေါ်ကို တဝဲလည်လည်နဲ့ အလှဆင်ပါ။
5. ပဉ္စမစာကြောင်းသည် Router အစိတ်အပိုင်းတစ်ခုအား ၎င်း၏အတွင်း၌ Route အစိတ်အပိုင်းနှစ်ခု (Home အတွက် တစ်ခုနှင့် About အတွက် တစ်ခု) ဖြင့် Router အစိတ်အပိုင်းတစ်ခုကို တင်ဆက်ပေးမည့် App အစိတ်အပိုင်းတစ်ခုကို ဖန်တီးပေးပါသည်။ ၎င်းသည် အထက်ဖော်ပြပါ လိုင်း 4 တွင် ဖန်တီးထားသော StyledLink အစိတ်အပိုင်းကို အသုံးပြု၍ လင့်ခ်နှစ်ခု (Home နှင့် About) ၏ အစီအစဥ်မတင်ရသေးသောစာရင်းကို ၎င်းတို့နှစ်ဦးစလုံးအား ပုံစံထုတ်ရန်အတွက် hr tag ဖြင့် ပိုင်းခြားထားသည်။
6. Lines 8 – 11 သည် ၎င်းတို့ နှစ်ခုစလုံးအပေါ်ရှိ Line 2 ရှိ သက်ဆိုင်ရာ လမ်းကြောင်း အစိတ်အပိုင်းများမှ ခေါ်ဝေါ်သောအခါတွင် ၎င်းတို့ အတွင်းရှိ သက်ဆိုင်ရာ အမည်များ ဖြင့် ၎င်းတို့၏ သက်ဆိုင်ရာ အမည်များဖြင့် တင်ဆက်သော h5 တဂ်များကို ၎င်းတို့ နှစ်ခုလုံး အထက်တွင် ပြုလုပ်သည် (Home မှ "Home" ဟု ပြန်ဆိုသည် "About" )
7. နောက်ဆုံးတွင်၊ Line 12 သည် လိုအပ်ပါက ကျွန်ုပ်တို့၏ အပလီကေးရှင်းတွင် အခြားနေရာတွင် အသုံးပြုရန်အတွက် အက်ပ်အစိတ်အပိုင်းကို တင်ပို့သည်။

Static Styles များ

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

စတိုင်လ်-အစိတ်အပိုင်းများ ပက်ကေ့ချ်

Styled-components သည် developer များအား ၎င်းတို့၏ React အပလီကေးရှင်းများတွင် အစိတ်အပိုင်းအဆင့်စတိုင်များကို ဖန်တီးပြီး စီမံခန့်ခွဲခွင့်ပြုသည့် React Router အတွက် ရေပန်းစားသော ပက်ကေ့ဂျ်တစ်ခုဖြစ်သည်။ ၎င်းသည် ထိန်းသိမ်းရန်နှင့် အမှားရှာရန် ပိုမိုလွယ်ကူစေသည့် အစိတ်အပိုင်းတစ်ခုအတွက် ကန့်သတ်ထားသော CSS ကုဒ်ကို ရေးရန် လွယ်ကူသောနည်းလမ်းကို ပံ့ပိုးပေးပါသည်။ ပုံစံလုပ်ထားသော အစိတ်အပိုင်းများသည် အစိတ်အပိုင်းများစွာတွင် စတိုင်လ်များကို မျှဝေရန် ပိုမိုလွယ်ကူစေသည့်အပြင် ၎င်းတို့ကို ပံ့ပိုးပေးပါသည်။ ထို့အပြင်၊ စတိုင်လုပ်ထားသော အစိတ်အပိုင်းများကို React Router ၏ Link အစိတ်အပိုင်းဖြင့် အသုံးပြုနိုင်ပြီး developer များသည် ၎င်းတို့၏ application အတွင်းလင့်ခ်များကို ပုံစံထုတ်နိုင်စေမည်ဖြစ်သည်။

Static Styles ဘယ်လိုသုံးမလဲ။

inline style attribute ကို အသုံးပြု၍ React Router တွင် Static style များကို အသုံးပြုနိုင်ပါသည်။ ဤရည်ညွှန်းချက်သည် သင့်အား သီးခြားစတိုင်စာရွက်မလိုအပ်ဘဲ စတိုင်တစ်ခုအား ဒြပ်စင်တစ်ခုသို့ တိုက်ရိုက်အသုံးပြုခွင့်ပေးသည်။ React Router တွင် တည်ငြိမ်စတိုင်များကို အသုံးပြုရန်၊ သင်သည် စတိုင်အရာဝတ္ထုတစ်ခုကို ဖန်တီးပြီးနောက် ၎င်းကို အစိတ်အပိုင်း၏စတိုင် prop သို့ အကြောင်းပြချက်တစ်ခုအဖြစ် ပေးပို့ရမည်ဖြစ်သည်။ ဥပမာ:

const myStyle = {
နောက်ခံအရောင်- '#f2f2f2'၊
fontSize: '20px'၊
အရောင်- '#000'
};