📘 React Router v7 শেখার আগে যেটা জানা জরুরি — কোন মোডটি বেছে নেবেন?

React Router হচ্ছে এমন একটা রাউটিং লাইব্রেরি যেটা React অ্যাপে বিভিন্ন পেজ বা রুট তৈরি করার জন্য সবচেয়ে জনপ্রিয় সমাধান। তবে এখন এটা শুধু একটা সাধারণ রাউটার না — এটা তিনটা ভিন্ন "মোডে" কাজ করতে পারে।

যারা একেবারে শুরু করছেন, তারা হয়তো কনফিউসড থাকেন যে কোন মোডে শিখা শুরু করবো? চলুন একদম সহজভাবে বুঝি।

🧭 React Router-এর তিনটি মোড

React Router v7 তিনটা ভিন্নভাবে ব্যবহার করা যায়। এই তিনটা মোড হলো:

1. Declarative Mode (ঘরোয়া/সাধারণ)
2. Data Mode (ডেটা-চিন্তাধারায় সমৃদ্ধ)
3. Framework Mode (পুরো প্যাকেজ সমাধান)

১️⃣ Declarative Mode – একদম সিম্পলভাবে শুরু করতে চান?

আপনি যদি React এ একেবারে নতুন হন, এবং <BrowserRouter>, <Routes>, <Route>, <Link> এসব সহজ ট্যাগ দিয়ে রাউটিং করতে চান—তাহলে এই মোড একদম পারফেক্ট।

import { BrowserRouter } from "react-router-dom";
 
ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
        <App /> {" "}
  </BrowserRouter>
);

🔹 কী পাওয়া যাবে?

• রাউট তৈরি করা
• useNavigate, useLocation দিয়ে ন্যাভিগেশন
• <Link> দিয়ে ক্লিক করে অন্য পেজে যাওয়া

🎯 কার জন্য?

• যারা Create React App ব্যবহার করেন
• যারা শুধু client-side routing চান
• যারা খুব লাইটওয়েট কিছু চান

২️⃣ Data Mode – ডেটার সাথে শক্তিশালী রাউটিং

এখানে আপনি রাউট কনফিগারেশন React কম্পোনেন্টের বাইরে রেখে loader, action, useFetcher ব্যবহার করতে পারবেন। এটা অনেকটা Remix-এর মতো।

import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
const router = createBrowserRouter([
  {
    path: "/",
    Component: RootComponent,
    loader: loadRootData,
  },
]);
 
ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

🔹 কী পাওয়া যাবে?

• loader দিয়ে রাউট লোড হওয়ার আগেই ডেটা আনতে পারবেন
• action দিয়ে ফর্ম সাবমিশন হ্যান্ডেল করা যাবে
• ডেটা পেন্ডিং স্টেট ও ইরর হ্যান্ডলিং সুবিধা

🎯 কার জন্য?

• যারা রাউটিং + ডেটা একসাথে ম্যানেজ করতে চান
• যারা Create React App বাদ দিয়ে কাস্টম বাণ্ডলিং করেন

৩️⃣ Framework Mode – যাদের কিছু না জানলেও চলবে

এটা একদম অল-ইন-ওয়ান মোড। আপনি যদি Vite ব্যবহার করেন, তাহলে একদম Next.js/Remix-এর মতো ডেভেলপমেন্ট ফিল পাবেন।

import { index, route } from "@react-router/dev/routes";
 
export default [index("./home.tsx"), route("products/:pid", "./product.tsx")];

🔹 কী পাওয়া যাবে?

• টাইপ সেফ রাউটিং (TypeScript ইউজারদের জন্য দারুণ)
• ফাইল-ভিত্তিক রাউটিং
• SPA, SSR, SSG সব স্ট্রাটেজি
• অটোমেটিক কোড স্প্লিটিং

🎯 কার জন্য?

• একদম নতুন যারা কোন সিদ্ধান্তে আসতে পারছেন না
• যারা Next.js বা Remix থেকে আসছেন
• যারা future-proof অ্যাপ বানাতে চান

📝 তাহলে আপনি কোন মোড বেছে নেবেন?

🎯 নতুনদের জন্য সুপার টিপস:

• আপনি যদি কিছু না বুঝে থাকেন, Framework Mode ব্যবহার করে শুরু করলেই ভালো। এতে আপনি একটু একটু করে বাকিগুলো বুঝে ফেলবেন।
• ভয়ের কিছু নেই। আপনি মোড পরিবর্তন করেও শিখতে পারবেন। শুরুতে শুধু একটাতে ফোকাস রাখুন।

🔗 শেখার পথ শুরু করুন

👇 এখানে থেকে সরাসরি শুরু করুন:

• 👉 Declarative Mode সেটআপ (opens in a new tab)
• 👉 Data Mode সেটআপ (opens in a new tab)
• 👉 Framework Mode সেটআপ (opens in a new tab)

✅ উপসংহার

React Router v7 এখন শুধু URL-এর উপর কম্পোনেন্ট দেখানোর কাজ করে না, বরং আপনি চাইলে এখানে সম্পূর্ণ রাউট-ভিত্তিক ডেটা লোডিং থেকে শুরু করে টাইপ সেফ API পর্যন্ত পাবেন।

তবে শুরুটা হোক আপনার আরামদায়ক মোড দিয়ে।

React শিখুন, Router বুঝুন, এবং সামনে এগিয়ে যান! 🚀