प्रतिक्रिया राउटर

क्रिएट रिएक्ट ऐप में पेज रूटिंग शामिल नहीं है।

रिएक्ट राउटर सबसे लोकप्रिय समाधान है।

रिएक्ट राउटर जोड़ें

अपने एप्लिकेशन में रिएक्ट राउटर जोड़ने के लिए, इसे एप्लिकेशन के रूट डायरेक्टरी से टर्मिनल में चलाएं:

फ़ोल्डर संरचना

एकाधिक पृष्ठ मार्गों के साथ एक एप्लिकेशन बनाने के लिए, आइए पहले फ़ाइल संरचना से शुरू करें।

फोल्डर के भीतर , हम कई फाइलों के srcनाम से एक फोल्डर बनाएंगे :pages

src\pages\:

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

प्रत्येक फ़ाइल में एक बहुत ही बुनियादी प्रतिक्रिया घटक होगा।

मूल उपयोग

index.jsअब हम अपनी फाइल में अपने राउटर का इस्तेमाल करेंगे ।

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 नेस्टेड किया जा सकता है। पहले <Route>का एक पथ है / और Layoutघटक को प्रस्तुत करता है।

नेस्टेड <Route>एस इनहेरिट करता है और मूल मार्ग में जोड़ता है। तो blogsपथ माता-पिता के साथ जुड़ जाता है और बन जाता है /blogs।

घटक मार्ग में Homeपथ नहीं है लेकिन एक indexविशेषता है। यह इस मार्ग को मूल मार्ग के लिए डिफ़ॉल्ट मार्ग के रूप में निर्दिष्ट करता है, जो कि /.

वसीयत को किसी भी अपरिभाषित URL के लिए कैच-ऑल के रूप में सेट करना path। *यह 404 त्रुटि पृष्ठ के लिए बहुत अच्छा है।

पन्ने / अवयव

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;