Web Development React Router এর মাধ্যমে Navigation গাইড ও নোট

React Router হলো React অ্যাপ্লিকেশনগুলিতে নেভিগেশন (Navigation) এবং রাউটিং (Routing) ব্যবস্থাপনার জন্য ব্যবহৃত একটি শক্তিশালী লাইব্রেরি। এটি আপনাকে একাধিক পেজ বা ভিউ তৈরি করতে এবং ইউজারদের বিভিন্ন পেজে স্যুইচ করতে সহায়তা করে, যেন ইউজার অভিজ্ঞতা মসৃণ এবং নেটিভ অ্যাপের মতো হয়।

কেন React Router ব্যবহার করবেন?

• ডায়নামিক রাউটিং: ইউজার ইন্টারঅ্যাকশন অনুযায়ী পেজ পরিবর্তন।
• ক্লায়েন্ট-সাইড রাউটিং: সার্ভার রাউটিং ছাড়াই দ্রুত পেজ লোড।
• Nested Routes: জটিল অ্যাপ্লিকেশনে উপ-রাউট তৈরি।
• Route Parameters: ইউজার ইনপুট বা ডাইনামিক ডেটা হ্যান্ডল করা।
• Code Splitting: অ্যাপ্লিকেশন পারফরম্যান্স উন্নত করতে কোড বিভাজন।

React Router এর মূল উপাদানসমূহ

1. BrowserRouter: এটি হাইব্রিড ব্রাউজারের ইতিহাস API ব্যবহার করে রাউটিং পরিচালনা করে। সাধারণত অ্যাপ্লিকেশনের মূল রাউটার হিসেবে ব্যবহৃত হয়।
2. Routes এবং Route: নির্দিষ্ট URL পাথের সাথে নির্দিষ্ট কম্পোনেন্ট যুক্ত করে।
3. Link: নেভিগেশন করার জন্য ব্যবহৃত হয়, যা SPA (Single Page Application) এর মধ্যে পেজ রিলোড ছাড়াই কাজ করে।
4. Navigate: প্রোগ্রাম্যাটিকভাবে নেভিগেট করার জন্য ব্যবহৃত হয়।
5. Outlet: Nested Routes এর ক্ষেত্রে চাইল্ড কম্পোনেন্ট রেন্ডার করার জন্য ব্যবহৃত হয়।
6. useParams, useNavigate, useLocation: বিভিন্ন হুক যা রাউটিং সম্পর্কিত তথ্য এবং কার্যকারিতা প্রদান করে।

React Router ইনস্টলেশন

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

npm install react-router-dom

বেসিক রাউটিং উদাহরণ

নিচে একটি সহজ উদাহরণ দেওয়া হলো যেখানে তিনটি পেজ (Home, About, Contact) রাউট করা হয়েছে:

১. App.js

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">হোম</Link>
            </li>
            <li>
              <Link to="/about">আমাদের সম্পর্কে</Link>
            </li>
            <li>
              <Link to="/contact">যোগাযোগ</Link>
            </li>
          </ul>
        </nav>

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

export default App;

২. Home.js

import React from 'react';

function Home() {
  return (
    <div>
      <h2>হোম পেজ</h2>
      <p>স্বাগতম আমাদের ওয়েবসাইটে!</p>
    </div>
  );
}

export default Home;

৩. About.js

import React from 'react';

function About() {
  return (
    <div>
      <h2>আমাদের সম্পর্কে</h2>
      <p>আমরা একটি উদাহরণস্বরূপ কোম্পানি।</p>
    </div>
  );
}

export default About;

৪. Contact.js

import React from 'react';

function Contact() {
  return (
    <div>
      <h2>যোগাযোগ</h2>
      <p>আমাদের সাথে যোগাযোগ করুন: contact@example.com</p>
    </div>
  );
}

export default Contact;

Nested Routes (নেস্টেড রাউট)

নেস্টেড রাউট ব্যবহার করে আপনি একটি পেজের মধ্যে আরেকটি রাউট তৈরি করতে পারেন। নিচে একটি উদাহরণ দেওয়া হলো:

১. App.js

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Team from './Team';
import History from './History';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">হোম</Link>
            </li>
            <li>
              <Link to="/about">আমাদের সম্পর্কে</Link>
            </li>
            <li>
              <Link to="/contact">যোগাযোগ</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about/*" element={<About />}>
            <Route path="team" element={<Team />} />
            <Route path="history" element={<History />} />
          </Route>
          <Route path="/contact" element={<Contact />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

২. About.js

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

function About() {
  return (
    <div>
      <h2>আমাদের সম্পর্কে</h2>
      <p>আমরা একটি উদাহরণস্বরূপ কোম্পানি।</p>
      <ul>
        <li>
          <Link to="team">টিম</Link>
        </li>
        <li>
          <Link to="history">ইতিহাস</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  );
}

export default About;

৩. Team.js

import React from 'react';

function Team() {
  return (
    <div>
      <h3>আমাদের টিম</h3>
      <p>আমাদের টিমের বিবরণ এখানে।</p>
    </div>
  );
}

export default Team;

৪. History.js

import React from 'react';

function History() {
  return (
    <div>
      <h3>আমাদের ইতিহাস</h3>
      <p>আমাদের প্রতিষ্ঠার ইতিহাস এখানে।</p>
    </div>
  );
}

export default History;

Route Parameters (রাউট প্যারামিটার)

রাউট প্যারামিটার ব্যবহার করে আপনি ডাইনামিক ইউজার ইনপুট গ্রহণ করতে পারেন, যেমন ইউজারের আইডি অনুসারে প্রোফাইল দেখানো।

১. App.js

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

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">হোম</Link>
            </li>
            <li>
              <Link to="/user/1">User 1</Link>
            </li>
            <li>
              <Link to="/user/2">User 2</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/user/:id" element={<UserProfile />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

২. UserProfile.js

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

function UserProfile() {
  const { id } = useParams();

  return (
    <div>
      <h2>User Profile</h2>
      <p>ইউজার আইডি: {id}</p>
    </div>
  );
}

export default UserProfile;

Programmatic Navigation (প্রোগ্রাম্যাটিক নেভিগেশন)

কোনো ফাংশন বা ইভেন্ট থেকে প্রোগ্রাম্যাটিকভাবে নেভিগেট করতে পারেন useNavigate হুক ব্যবহার করে।

উদাহরণ:

import React from 'react';
import { useNavigate } from 'react-router-dom';

function Login() {
  const navigate = useNavigate();

  const handleLogin = () => {
    // লগইন লজিক
    // সফল হলে নেভিগেট করুন
    navigate('/dashboard');
  };

  return (
    <div>
      <h2>লগইন</h2>
      <button onClick={handleLogin}>লগইন করুন</button>
    </div>
  );
}

export default Login;

Redirects (রিডাইরেক্ট)

Navigate কম্পোনেন্ট ব্যবহার করে রিডাইরেক্ট করতে পারেন।

উদাহরণ:

import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="*" element={<Navigate to="/" replace />} />
    </Routes>
  );
}

export default App;

উপরের উদাহরণে, কোনো অজানা পাথের জন্য হোম পেজে রিডাইরেক্ট করা হয়েছে।

Authentication এবং Protected Routes (প্রোটেক্টেড রাউট)

রাউট প্রোটেকশন করতে পারেন যা শুধুমাত্র অথেনটিকেটেড ইউজারদের প্রবেশাধিকার দেয়।

উদাহরণ:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
import Home from './Home';
import Dashboard from './Dashboard';
import Login from './Login';

const isAuthenticated = false; // বাস্তব অ্যাপ্লিকেশনে এই স্টেট ম্যানেজমেন্ট হবে

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route
          path="/dashboard"
          element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" replace />}
        />
        <Route path="/login" element={<Login />} />
      </Routes>
    </Router>
  );
}

export default App;

সারাংশ

React Router ব্যবহার করে আপনি আপনার React অ্যাপ্লিকেশনে কার্যকরী নেভিগেশন এবং রাউটিং ব্যবস্থা তৈরি করতে পারেন। এটি একটি শক্তিশালী এবং নমনীয় লাইব্রেরি যা বিভিন্ন ধরণের অ্যাপ্লিকেশনের জন্য উপযুক্ত। নিচের মূল পয়েন্টগুলো মনে রাখুন:

• BrowserRouter: মূল রাউটার হিসেবে ব্যবহৃত হয়।
• Routes এবং Route: নির্দিষ্ট পাথের সাথে কম্পোনেন্ট যুক্ত করে।
• Link এবং Navigate: নেভিগেশনের জন্য ব্যবহৃত হয়।
• Nested Routes: জটিল রাউটিং স্ট্রাকচার তৈরি করতে।
• Route Parameters: ডাইনামিক ইউজার ইনপুট গ্রহণ করতে।
• Protected Routes: রাউট প্রোটেকশন করতে।

React Router এর মাধ্যমে আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ, ইউজার-ফ্রেন্ডলি এবং কার্যকরী করতে পারেন।

অতিরিক্ত রিসোর্স

• React Router Documentation
• React Router Tutorial (বাংলায়)
• React Router v6 Guide