Routing এবং Nested Routes তৈরি করা

ReactJS-এ React Router ব্যবহার করে রাউটিং পরিচালনা করা হয়। React Router আপনাকে একাধিক পেজ বা ভিউয়ের মধ্যে নেভিগেশন তৈরি করতে সহায়ক হয়, এবং এটি কম্পোনেন্টের মধ্যে ডাইনামিকভাবে পেজ পরিবর্তন করার সুবিধা দেয়। React Router দুটি প্রধান সংস্করণে উপলব্ধ: React Router DOM (ব্রাউজার ভিত্তিক রাউটিং) এবং React Router Native (মোবাইল অ্যাপ্লিকেশনের জন্য)। এখানে আমরা React Router DOM এর মাধ্যমে Routing এবং Nested Routes তৈরি করার পদ্ধতি দেখব।

React Router এর ইনস্টলেশন

প্রথমে, আপনাকে React Router ইনস্টল করতে হবে। React Router ইনস্টল করার জন্য NPM বা Yarn ব্যবহার করা যায়:

npm install react-router-dom

এবং Yarn ব্যবহার করলে:

yarn add react-router-dom

ReactJS-এ Routing তৈরি করা

React Router ব্যবহার করে আপনি সহজেই বিভিন্ন কম্পোনেন্টে নেভিগেট করতে পারেন। প্রধান কম্পোনেন্টে BrowserRouter, Route, এবং Link ইত্যাদি ব্যবহার করা হয়।

Routing এর উদাহরণ:

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

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

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

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

export default App;

এখানে, BrowserRouter হল রুটিংয়ের মূল কম্পোনেন্ট যা আপনার অ্যাপ্লিকেশনকে রাউটিং তথ্য প্রদান করে। Route কম্পোনেন্টটি পাথ অনুযায়ী নির্দিষ্ট কম্পোনেন্ট রেন্ডার করে, এবং Link কম্পোনেন্টটি নেভিগেশন লিঙ্ক তৈরি করতে ব্যবহৃত হয়।

Nested Routes তৈরি করা

ReactJS-এ Nested Routes তৈরি করার মাধ্যমে আপনি একটি রাউটের ভিতরে আরেকটি রাউট বা কম্পোনেন্ট রেন্ডার করতে পারেন। এটি একটি সাধারণ উপায় যখন আপনার অ্যাপ্লিকেশনে একাধিক স্তরের পেজ বা ভিউ থাকে। Nested Routes তৈরি করতে Route কম্পোনেন্টের মধ্যে অন্য Route কম্পোনেন্ট ব্যবহার করা হয়।

Nested Routes উদাহরণ:

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

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

function About() {
  return (
    <div>
      <h2>About Page</h2>
      <ul>
        <li>
          <Link to="/about/team">Our Team</Link>
        </li>
        <li>
          <Link to="/about/history">Our History</Link>
        </li>
      </ul>
      <Route path="/about/team" component={Team} />
      <Route path="/about/history" component={History} />
    </div>
  );
}

// Child Components (Nested Routes)
function Team() {
  return <h3>Meet Our Team</h3>;
}

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

export default App;

এখানে, About পেজের মধ্যে দুটি Nested Route তৈরি করা হয়েছে: একটি Team পেজ এবং আরেকটি History পেজ। যখন আপনি About পেজে যান, তখন আপনি ঐ পেজের ভিতরে আরও সাব-রাউট দেখতে পারবেন, যেমন Our Team এবং Our History।

ReactJS-এ Nested Route-এর পরামর্শ:

1. Route Order: React Router-এ Route গুলি একটি নির্দিষ্ট অর্ডারে রেন্ডার হয়। সাধারণত, আপনি সবচেয়ে সাধারণ রাউটগুলিকে প্রথমে এবং Nested রাউটগুলিকে পরে রাখবেন।

2. Exact Prop: যখন আপনি একাধিক রাউট পাথ ব্যবহার করবেন, তখন exact প্রপস ব্যবহার করুন যাতে নিশ্চিত করা যায় যে পাথটি ঠিকমতো মিলে গেছে, অন্যথায় React Router অন্য কোন রাউটেও ম্যাচ করে ফেলতে পারে।

   <Route path="/" exact component={Home} />
   

3. React Router v6: React Router-এর নতুন ভার্সন (v6) বেশ কিছু নতুন পরিবর্তন এনেছে, যেমন Switch কম্পোনেন্টের পরিবর্তে Routes কম্পোনেন্ট ব্যবহার, এবং component প্রপসের পরিবর্তে element প্রপস ব্যবহৃত হয়।

React Router v6 Nested Routes উদাহরণ

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

// Parent Component
function About() {
  return (
    <div>
      <h2>About Page</h2>
      <ul>
        <li>
          <Link to="team">Our Team</Link>
        </li>
        <li>
          <Link to="history">Our History</Link>
        </li>
      </ul>

      <Routes>
        <Route path="team" element={<Team />} />
        <Route path="history" element={<History />} />
      </Routes>
    </div>
  );
}

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

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

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about/*" element={<About />} />
      </Routes>
    </Router>
  );
}

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

export default App;

এখানে, React Router v6 এর জন্য Routes এবং element প্রপস ব্যবহার করা হয়েছে। * ব্যবহার করে সাব-পাথ যোগ করা হয়েছে।

সারাংশ

ReactJS-এ Routing এবং Nested Routes ব্যবহারের মাধ্যমে একাধিক পেজ এবং ডাইনামিক নেভিগেশন তৈরি করা যায়। React Router ডমিনেট করা সিস্টেম ব্যবহার করে কম্পোনেন্টের মধ্যে সহজেই নেভিগেশন পরিচালনা করা সম্ভব। Nested Routes ব্যবহারের মাধ্যমে পেজের ভিতরে আরও ডাইনামিক রাউট তৈরি করা যায়, যা React অ্যাপ্লিকেশনকে আরও ফ্লেক্সিবল এবং ব্যবহারযোগ্য করে তোলে।