React Router Tutorial | React Router DOM Tutorial in Hindi | part 1

React Router is one of the most popular routing libraries for React. It allows you to create complex navigation and route management in your React applications.

React Router DOM

React Router DOM is a part of the React Router library that provides tools for managing routes in a web application. It is specifically designed for web applications using React.

स्थापित करें (Install)

सबसे पहले, आपको react-router-dom पैकेज को इंस्टॉल करना होगा। आप निम्नलिखित कमांड का उपयोग करके npm या yarn के माध्यम से इसको स्थापित कर सकते हैं।

npm install react-router-dom

या

yarn add react-router-dom

प्रथम उदाहरण (First Example)

रिएक्ट राउटर का उपयोग करना अत्यंत सरल है। निम्नलिखित उदाहरण में, हम प्रमुख App के लिए कुछ साधारण रूट्स स्थापित करेंगे।

    
      import React from 'react';
      import { BrowserRouter, Route, Link } from 'react-router-dom';

      const Home = () => <p>Home Page</p>;
      const About = () => <p>About Page</p>;
      const Contact = () => <p>Contact Page</p>;

      const App = () => (
        <BrowserRouter>
          <nav>
            <p><a href="/"><h3>Home</h3></a></p>
            <p><a href="/about"><h3>About</h3></a></p>
            <p><a href="/contact"><h3>Contact</h3></a></p>
          </nav>

          <nRoute path="/" exact component={Home} />
          <nRoute path="/about" component={About} />
          <nRoute path="/contact" component={Contact} />
        </BrowserRouter>
      );

      export default App;
    
  

इसे इस तरह चलानें। जब आप उदाहरण को चलाएँगे, आपको प्रधान पृष्ठ (Home Page), उपाय (About Page), और संपर्क (Contact Page) के लिए एक-एक अलग वेब पेज दिखाई देंगे जिन्हें आपने ऊपर कोड में सेट कर डिया है।

Next: React Router Tutorial | React Router DOM Tutorial in Hindi | part 2