Router ကို တုံ့ပြန်ပါ။

Create React အက်ပ်တွင် စာမျက်နှာလမ်းကြောင်းသတ်မှတ်ခြင်း မပါဝင်ပါ။

React Router သည် ရေပန်းအစားဆုံး ဖြေရှင်းချက်ဖြစ်သည်။

React Router ကိုထည့်ပါ။

သင့်အပလီကေးရှင်းတွင် React Router ထည့်ရန်၊ အပလီကေးရှင်း၏ root directory မှ terminal တွင် ၎င်းကို run ပါ။

ဖိုဒါဖွဲ့စည်းပုံ

စာမျက်နှာလမ်းကြောင်းများစွာပါသော အပလီကေးရှင်းတစ်ခုဖန်တီးရန်၊ ဖိုင်ဖွဲ့စည်းပုံဖြင့် ဦးစွာစတင်ကြပါစို့။

ဖိုင်တွဲ အတွင်း src၊ ကျွန်ုပ်တို့သည် ဖိုင်များစွာပါသော ဖိုင်တွဲတစ်ခုကို ဖန်တီးပါမည် pages-

src\pages\:

• Layout.js
• Home.js
• Blogs.js
• Contact.js
• NoPage.js

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

အခြေခံအသုံးပြုမှု

ယခုကျွန်ုပ်တို့၏ index.jsဖိုင်တွင်ကျွန်ုပ်တို့၏ Router ကိုအသုံးပြုပါမည်။

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

နမူနာရှင်းပြထားပါတယ်။

ကျွန်ုပ်တို့၏ အကြောင်းအရာကို ဦးစွာ နိဂုံးချုပ် <BrowserRouter>ပါသည်။

ပြီးရင် ငါတို့က ငါတို့ကို သတ်မှတ်တယ် <Routes>။ အက်ပလီကေးရှင်းတစ်ခုတွင် များစွာပါဝင်နိုင်သည် <Routes>။ ကျွန်ုပ်တို့၏ အခြေခံဥပမာတစ်ခုသာ အသုံးပြုပါသည်။

<Route>s ကို nested လို့ရပါတယ်။ ပထမ <Route>တစ်ခုတွင် လမ်းကြောင်းတစ်ခုရှိပြီး / အစိတ်အပိုင်းကို Layoutတင်ဆက်သည်။

nested <Route>s သည် အမွေဆက်ခံပြီး ပင်မလမ်းကြောင်းသို့ ပေါင်းထည့်သည်။ အဲဒီတော့ blogsလမ်းကြောင်းက မိဘနဲ့ ပေါင်းပြီးတော့ ဖြစ်သွားတာ /blogs။

အစိတ်အပိုင်း လမ်းကြောင်းတွင် Homeလမ်းကြောင်းတစ်ခုမရှိသော်လည်း indexရည်ညွှန်းချက်တစ်ခုရှိသည်။ ၎င်းသည် ဤလမ်းကြောင်းကို မိခင်လမ်းကြောင်းအတွက် ပုံသေလမ်းကြောင်းအဖြစ် သတ်မှတ်ပေးသည်၊ ဖြစ်သည့် /.

သတ်မှတ်ထားသော မ သတ်မှတ် pathရ *သေးသော မည်သည့် URL များအတွက်မဆို ဖမ်းယူမှုတစ်ခုအဖြစ် လုပ်ဆောင်ပါမည်။ ၎င်းသည် 404 error စာမျက်နှာအတွက် ကောင်းမွန်သည်။

စာမျက်နှာများ / အစိတ်အပိုင်းများ

Layoutအစိတ်အပိုင်း <Outlet>နှင့် <Link>ဒြပ်စင်များရှိသည် ။

<Outlet>ရွေးချယ်ထားသော လက်ရှိလမ်းကြောင်းကို တင်ဆက်ပေးသည် ။

<Link>URL ကို သတ်မှတ်ရန်နှင့် ရှာဖွေမှုမှတ်တမ်းကို ခြေရာခံရန် အသုံးပြုသည်။

ကျွန်ုပ်တို့သည် အတွင်းလမ်းကြောင်းတစ်ခုသို့ ချိတ်ဆက်သည့်အခါတိုင်း၊ ၎င်း <Link> အစား ကျွန်ုပ်တို့ အသုံးပြုပါမည် <a href="">။

"အပြင်အဆင်လမ်းကြောင်း" သည် လမ်းညွှန်ချက်မီနူးကဲ့သို့ စာမျက်နှာအားလုံးတွင် ဘုံအကြောင်းအရာကို ထည့်သွင်းသည့် မျှဝေထားသော အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။

import { Outlet, Link } from "react-router-dom";

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;