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

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

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createGlobalStyle } from 'styled-components';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
 
const GlobalStyle = createGlobalStyle` 
    body { 
        margin: 0; 

        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 
            "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 
            sans-serif;

        -webkit-font-smoothing: antialiased;

        -moz-osx-font-smoothing: grayscale;  

    }  

    code {  font-family: sourcecode pro, Menlo, Monaco, Consolas, Courier New, monospace; }  

    *{ boxsizing: borderbox;}  

    img{ maxwidth: 100%;}  

    a{ textdecoration : none;}     `; // Global styles for the entire app. This will be applied to all components. 
     const App = () => ( // The main component of the app. This is where all routes are defined.      <Router>       <div>         <GlobalStyle />          <Route exact path="/" component={HomePage} />          <Route path="/about" component={AboutPage} />       </div>     </Router> ); export default App;

1. 'တုံ့ပြန်မှု' မှ တုံ့ပြန်မှုကို တင်သွင်းပါ။ // React စာကြည့်တိုက်ကို ထည့်သွင်းခြင်း။
2. 'react-router-dom' မှ { BrowserRouter ကို Router၊ Route } အဖြစ် ထည့်သွင်းပါ။ // react-router-dom စာကြည့်တိုက်မှ BrowserRouter နှင့် Route အစိတ်အပိုင်းများကို တင်သွင်းခြင်း။
3. 'ပုံစံ-အစိတ်အပိုင်းများ' မှ { createGlobalStyle } ကို တင်သွင်းပါ။ // ပုံစံလုပ်ထားသော အစိတ်အပိုင်းများကို ဒစ်ဂျစ်တိုက်မှ createGlobalStyle လုပ်ဆောင်ချက်ကို ထည့်သွင်းခြင်း။
4. './pages/HomePage' မှ ပင်မစာမျက်နှာကို တင်သွင်းပါ။ // HomePage အစိတ်အပိုင်းကို တင်သွင်းခြင်း။
5. AboutPage ကို './pages/AboutPage' မှ တင်သွင်းပါ။ // AboutPage အစိတ်အပိုင်းကို တင်သွင်းခြင်း။
6. const GlobalStyle = createGlobalStyle`…`; // အက်ပ်တစ်ခုလုံးအတွက် ဂလိုဘယ်စတိုင်များ။ ဤအရာသည် အစိတ်အပိုင်းအားလုံးတွင် သက်ရောက်မည်ဖြစ်သည်။
7. const App = () => (…); // အက်ပ်၏ အဓိက အစိတ်အပိုင်း။ ဤနေရာတွင် လမ်းကြောင်းအားလုံးကို သတ်မှတ်သည်။
8. ; // HomePage အစိတ်အပိုင်းကို တင်ဆက်ပေးသည့် “/” ၏ တိကျသောလမ်းကြောင်းတစ်ခုဖြင့် လမ်းကြောင်းတစ်ခုကို သတ်မှတ်ခြင်း။
9. ; // AboutPage အစိတ်အပိုင်းကို တင်ဆက်ပေးသည့် “/about” လမ်းကြောင်းဖြင့် လမ်းကြောင်းတစ်ခုကို သတ်မှတ်ခြင်း။
10 မူရင်းအက်ပ်ကို တင်ပို့ခြင်း;// အက်ပ်ကို မူရင်းအတိုင်း တင်ပို့ခြင်း။

Styles ကိုအသုံးပြုခြင်း။

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

Public Folder ကိုအသုံးပြုခြင်း။

React Router ရှိ အများသူငှာ ဖိုဒါသည် ပုံများ၊ CSS နှင့် JavaScript တို့ကဲ့သို့ တည်ငြိမ်ဖိုင်များကို သိမ်းဆည်းရန် အသုံးပြုနိုင်သည့် အထူးဖိုင်တွဲတစ်ခုဖြစ်သည်။ ဤဖိုင်များကို React အပလီကေးရှင်းမှ လုပ်ဆောင်ခြင်းမရှိဘဲ အများသူငှာ ဖိုဒါမှ တိုက်ရိုက် ဆောင်ရွက်ပေးပါသည်။ ၎င်းသည် တင်သည့်အချိန်များကို ပိုမိုမြန်ဆန်စေပြီး အပလီကေးရှင်းတစ်ခု၏ စာမျက်နှာများစွာရှိ ပိုင်ဆိုင်မှုများကို စီမံခန့်ခွဲရန် ပိုမိုလွယ်ကူစေသည်။ အများသူငှာ ဖိုင်တွဲသည် လုံခြုံရေးနှင့် လျှို့ဝှက်ရေးတို့ကို ထိန်းသိမ်းရာတွင် ကူညီပေးနိုင်သည့် Git ကဲ့သို့သော ဗားရှင်းထိန်းချုပ်မှုစနစ်များမှ ဖိုင်အချို့ကို သိမ်းထားရန် နည်းလမ်းကိုလည်း ပံ့ပိုးပေးပါသည်။

React ရှိ အများသူငှာ ဖိုဒါမှ CSS ဖိုင်ကို မည်သို့တင်သွင်းရမည်နည်း။

React Router တွင် Link အစိတ်အပိုင်းကို အသုံးပြု၍ အများသူငှာ ဖိုဒါမှ CSS ဖိုင်ကို တင်သွင်းနိုင်သည်။ လင့်ခ်အစိတ်အပိုင်းသည် သင့်အား href attribute တွင် ဖိုင်သို့လမ်းကြောင်းတစ်ခုသတ်မှတ်ရန်ခွင့်ပြုသည်။ ဥပမာ:

၎င်းသည် သင့်အများပြည်သူဖိုဒါမှ styles.css ဖိုင်ကို သင်၏ React Router အပလီကေးရှင်းသို့ တင်သွင်းမည်ဖြစ်သည်။