ReactJS Router | Define Routes In ReactJs In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

ReactJS में React Router एक popular library है जो React applications में client-side routing को implement करने के लिए use होती है।

इसकी help से हम single-page applications (SPA) में multiple pages और routes create कर सकते हैं बिना page reload किये। इसका use करके हम URLs के according से specific components render कर सकते हैं, जो application को interactive और responsive बनाता है।

इस topic में हम देखेंगे कि React Router क्या है, कैसे install करते हैं और कैसे different routes setup करते हैं। साथ ही, हम देखेंगे कि कैसे Route, Link, Switch और useParams जैसे components और hooks का use करते हैं।

●●●

React Router Example

सबसे पहले हमें React Router को अपने project में install करना पड़ेगा।

React Router को अपने React project में install करने के लिए ये command run करें -

npm install react-router-dom

ये command react-router-dom package को install करेगी जो browser-based routing के लिए necessary है।

●●●

ReactJs Basic Routing Setup

React Router के साथ routing setup करने के लिए BrowserRouter, Route और Switch components का use होता है।

File : src/App.js

Copy
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <Router>
      <div>
        <h1>Welcome to React Router Tutorial</h1>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Explanation

• BrowserRouter (as Router) : यह React Router को enable करता है और इसके अंदर सारे routes define किये जाते हैं।

• Switch : Switch component ensure करता है कि सिर्फ पहला matched route ही render हो।

• Route : Route component path और component को link करता है. अगर URL path और Route path match हो जाए , तो specified component render होता है।

●●●

Pages Components Setup

हम अलग-अलग components बनाते हैं जो हर route के लिए specific page को represent करेंगे।

File : src/pages/Home.js

Copy
import React from 'react';

function Home() {
  return <h2>Home Page</h2>;
}

export default Home;

File : src/pages/About.js

Copy
import React from 'react';

function About() {
  return <h2>About Page</h2>;
}

export default About;

File : src/pages/Contact.js

Copy
import React from 'react';

function Contact() {
  return <h2>Contact Page</h2>;
}

export default Contact;

इस basic setup के बाद जब आप /, /about, और /contact URLs access करते हैं, तो respective components render होंगे।

●●●

ReactJs Navigate using Link Component

React Router में हम Link component का use करके internal navigation create कर सकते हैं बिना page reload किये।

File : src/App.js

Copy
// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
    <Router>
      <div>
        <h1>React Router Example</h1>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/contact">Contact</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Explanation

• Link : Link component तो prop के through target route specify करता है, जिसे click करने पर relevant component load होता है बिना page reload के।

• <ul> और <li> : Navigation links को list style में display करने के लिए।

●●●

Nested Routing in ReactJs

React में nested routes को handle करना आसान है। Nested routes से हम एक parent route के अंदर child routes define कर सकते हैं।

File : src/pages/About.js

Copy
import React from 'react';
import { Route, Link, Switch, useRouteMatch } from 'react-router-dom';
import Team from './Team';
import Company from './Company';

function About() {
  let { path, url } = useRouteMatch();

  return (
    <div>
      <h2>About Page</h2>
      <ul>
        <li><Link to={`${url}/team`}>Our Team</Link></li>
        <li><Link to={`${url}/company`}>Company Info</Link></li>
      </ul>

      <Switch>
        <Route path={`${path}/team`} component={Team} />
        <Route path={`${path}/company`} component={Company} />
      </Switch>
    </div>
  );
}

export default About;

File : src/pages/Team.js

Copy
import React from 'react';

function Team() {
  return <h3>Our Team</h3>;
}

export default Team;

File : src/pages/Company.js

Copy
import React from 'react';

function Company() {
  return <h3>Company Information</h3>;
}

export default Company;

Explanation

• useRouteMatch : यह hook current URL path और URL को manage करने में help करता है।

• Nested Routes : Switch के अंदर हम nested routes define करते हैं जो parent route के specific path के साथ match hone पर render होते हैं।

●●●

ReactJs Dynamic Routing with URL Parameters

React Router में dynamic routing काफी useful होता है जब हमें specific ID या parameter के basis पर pages render करना हो। हम URL parameters को useParams hook से access कर सकते हैं।

File : src/pages/Product.js

Copy
import React from 'react';
import { useParams } from 'react-router-dom';

function Product() {
  const { productId } = useParams();

  return <h2>Product ID: {productId}</h2>;
}

export default Product;

File : src/App.js

Copy
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Product from './pages/Product';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/product/123">Product 123</Link></li>
          </ul>
        </nav>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/product/:productId" component={Product} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

Explanation

• useParams : यह hook URL से parameters को retrieve करता है। यहां productId URL parameter को use करके display किया गया है।

• Dynamic URL Path : /product/:productId path में :productId एक dynamic segment है जो किसी भी value के साथ match हो सकता है।

●●●

Redirecting with React Router

React Router में Redirect component का use करके हम users को specific routes पर automatically navigate कर सकते हैं।

File : src/App.js

Copy
import React from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  const isLoggedIn = false;

  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about">
          {isLoggedIn ? <About /> : <Redirect to="/" />}
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

Explanation

• Redirect : अगर user isLoggedIn नहीं है तो user को /about page पर जाने से restrict करके Home page पर redirect किया गया है।

• Conditional Rendering with Redirect : Redirect का use mostly authenticated routes या access control के लिए होता है।

●●●

React Router के साथ routing और navigation समझना एक interactive और seamless user experience देने में help करता है। इसकी practice से आप अपनी React applications को ज़्यादा dynamic और user-friendly बना सकते हैं।

Hope , ये topic आपके लिए helpful रहा होगा , मिलते हैं next topic पर।

Happy coding! 🎉