React এর হাতেখড়ি (পর্ব ১৫) — React Router বেসিক শিখুন

আগের পর্বে Component যোগাযোগ ও Lifecycle অংশ শেষ হয়েছে। এখন শুরু হচ্ছে "Routing ও Styling" — প্রথম টপিক React Router। এতদিন আমরা একটা মাত্র "পেজ" (component) নিয়ে কাজ করেছি — এই পর্বে শিখব কীভাবে একটা React অ্যাপে একাধিক পেজ (হোম, অ্যাবাউট, ইত্যাদি) বানানো যায়, URL অনুযায়ী।

সমস্যাটা কী? — SPA-তে একাধিক পেজ

React পর্ব ১-এ শিখেছিলাম React একটা SPA (Single Page Application) বানায় — শুধু একটা index.html। কিন্তু বাস্তব ওয়েবসাইটে তো একাধিক "পেজ" লাগে — হোম, অ্যাবাউট, প্রোডাক্ট লিস্ট, প্রোডাক্ট ডিটেইল। React Router লাইব্রেরি এই সমস্যা সমাধান করে — এটা URL-এর সাথে মিলিয়ে ভিন্ন ভিন্ন component দেখায়, পুরো পেজ রিলোড না করেই।

ইনস্টলেশন

npm install react-router-dom

বেসিক সেটআপ — BrowserRouter, Routes, Route

তিনটা মূল বিল্ডিং ব্লক আছে:

কম্পোনেন্ট	কাজ
<BrowserRouter>	পুরো অ্যাপকে routing সুবিধা দেয়, সবার বাইরে wrap করে
<Routes>	সব <Route>-এর কন্টেইনার
<Route>	একটা নির্দিষ্ট path-এ কোন component দেখাবে তা বলে

// src/main.jsx
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

// src/App.jsx
import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home.jsx";
import About from "./pages/About.jsx";
import Contact from "./pages/Contact.jsx";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

এখন /about-এ গেলে About component দেখাবে, /contact-এ গেলে Contact — আর কোনোটাই আসলে পেজ রিলোড করছে না, শুধু React বদলে বদলে JSX রেন্ডার করছে।

Link — নেভিগেশনের সঠিক উপায়

সাধারণ HTML <a> ট্যাগ ব্যবহার করলে পুরো পেজ রিলোড হয়ে যাবে (SPA-র সুবিধা নষ্ট)। এর বদলে React Router-এর <Link> ব্যবহার করতে হয়।

import { Link } from "react-router-dom";

function Navbar() {
  return (
    <nav>
      <Link to="/">হোম</Link>
      <Link to="/about">আমাদের সম্পর্কে</Link>
      <Link to="/contact">যোগাযোগ</Link>
    </nav>
  );
}

<a href="...">	<Link to="...">
পুরো পেজ রিলোড হয়	শুধু JSX পাল্টায়, রিলোড হয় না
সব React state হারিয়ে যায়	অন্য component-এর state বজায় থাকে
ধীর	দ্রুত (তাৎক্ষণিক)

লাইভ ডেমো — সরলীকৃত মাল্টি-পেজ নেভিগেশন

নিচের উদাহরণটা routing-এর ধারণা দেখানোর জন্য একটা সরলীকৃত ভার্সন (Blogger পোস্টের ভেতরে থাকায় সত্যিকারের URL পাল্টানো সম্ভব না) — কিন্তু Routes/Route/Link-এর আচরণ ঠিক এভাবেই কাজ করে — ক্লিক করলে পুরো পেজ রিলোড ছাড়াই কন্টেন্ট পাল্টে যায়।

এখানে useState দিয়ে সরলীকৃত করা হয়েছে — আসল প্রজেক্টে react-router-dom ব্যবহার করলে URL-ও একইসাথে পাল্টাবে, ব্রাউজারের ব্যাক/ফরওয়ার্ড বাটনও কাজ করবে।

URL প্যারামিটার — ডাইনামিক পেজ

একটা নির্দিষ্ট বইয়ের পেজ (যেমন /books/123) বানাতে হলে path-এ একটা প্যারামিটার দিতে হয়, আর useParams Hook দিয়ে সেটা পড়া যায়।

// App.jsx-এ
<Route path="/books/:bookId" element={<BookDetail />} />

// BookDetail.jsx
import { useParams } from "react-router-dom";

function BookDetail() {
  const { bookId } = useParams(); // URL থেকে "123" বের করা

  React.useEffect(() => {
    // পর্ব ১৩-এর টেকনিক — bookId দিয়ে fetch করা
    fetchBook(bookId);
  }, [bookId]);

  return <h1>বই #{bookId}</h1>;
}

এখানে :bookId-এর কোলন (:) বলে দেয় এটা একটা ডাইনামিক অংশ — /books/1, /books/2, যেকোনো সংখ্যাতেই এই একই Route ম্যাচ করবে।

useNavigate — কোড থেকে নেভিগেট করা

Link শুধু ক্লিকের জন্য। কিন্তু ফর্ম সাবমিট করার পর, বা কোনো শর্ত পূরণ হলে নিজে থেকে অন্য পেজে পাঠাতে চাইলে useNavigate Hook ব্যবহার করা হয়।

import { useNavigate } from "react-router-dom";

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

  async function handleSubmit(e) {
    e.preventDefault();
    const success = await login(); // ধরো এটা লগইন করার ফাংশন

    if (success) {
      navigate("/dashboard"); // সফল হলে ড্যাশবোর্ডে পাঠানো
    }
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

404 পেজ — কোনো Route না মিললে

path="*" দিয়ে একটা "ক্যাচ-অল" রুট বানানো যায়, যেটা অন্য কোনো path না মিললে দেখাবে।

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="*" element={<NotFound />} /> {/* সবার শেষে */}
</Routes>

Cloudflare Pages-এ ডিপ্লয়ের সময় একটা সতর্কতা

React Router URL সরাসরি ব্রাউজারের ইতিহাসে পাল্টায় (BrowserRouter ব্যবহার করলে)। কিন্তু কেউ যদি সরাসরি yoursite.com/about-এ গিয়ে পেজ রিফ্রেশ করে, সার্ভার সেই path-এ আসলে কোনো ফাইল খুঁজে পাবে না (কারণ আসলে সবই index.html)। Cloudflare Pages-এ এটা ঠিক করতে একটা _redirects ফাইল লাগে:

# public/_redirects
/*    /index.html   200

এই একটা লাইন Cloudflare Pages-কে বলে দেয় — যেকোনো path-এ রিকোয়েস্ট আসলে index.html সার্ভ করো, তারপর React Router নিজেই বুঝে নেবে কোন component দেখাতে হবে।

নিজে চেষ্টা করো

Exercise:

1. একটা নতুন Vite React প্রজেক্টে react-router-dom ইনস্টল করো, Home আর About দুইটা পেজ বানাও।
2. একটা Navbar component বানাও যেটা Link দিয়ে দুই পেজের মধ্যে নেভিগেট করে।
3. /books/:bookId-এর মতো একটা ডাইনামিক route বানাও, useParams দিয়ে সেই ID দেখাও।
4. একটা 404 পেজ বানাও যা path="*" দিয়ে ম্যাচ হয়।

পরের পর্বে যা থাকছে

পরের পর্বে আমরা শিখব React-এ Styling — CSS Modules, inline style, আর conditional className দিয়ে কীভাবে component-ভিত্তিক স্টাইলিং সংগঠিত রাখা যায়।