React Router Setup & Basics – Beginner Friendly Guide

React Router হলো React অ্যাপে multiple pages বা different views দেখানোর জন্য একটি জনপ্রিয় লাইব্রেরি। সাধারণভাবে React একটি single-page application (SPA), তাই URL পরিবর্তন হলেও পেজ reload হয় না। React Router এই কাজটি smooth ভাবে handle করে।

📌 React Router কি?

React Router হলো একটি routing library যেটি আপনাকে আপনার অ্যাপে বিভিন্ন URL অনুযায়ী বিভিন্ন component বা page দেখাতে সাহায্য করে।

URL পরিবর্তন করলে component পরিবর্তন হয়
Page reload হয় না
Single Page App-কে Multi view অ্যাপের মতো behave করায়
Nested routes, dynamic routes, protected routes support করে

📌 React Router Install

npm install react-router-dom

অথবা Yarn ব্যবহার করলে —

yarn add react-router-dom

📌 Basic File Structure


src/
 ├── App.js
 ├── index.js
 ├── pages/
 │    ├── Home.js
 │    ├── About.js
 │    └── Contact.js

📌 BrowserRouter Setup

React Router ব্যবহার করতে প্রথমে আপনার অ্যাপকে BrowserRouter দিয়ে wrap করতে হবে।


// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

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

📌 Basic Routes Setup

এখন App.js এ Routes সেট করা হবে:


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

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

export default App;

path="/about" মানে URL হবে:

http://localhost:3000/about

📌 Link Component – Navigation

Normal <a> tag React অ্যাপে পেজ reload করে। তাই React Router navigation-এর জন্য Link ব্যবহার করতে হবে।


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

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

export default Navbar;

📌 useNavigate Hook – Programmatic Navigation

কোন event এর মাধ্যমে navigate করতে চাইলে useNavigate() ব্যবহার করা হয়।


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

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

  return (
    <button onClick={() => navigate("/about")}>
      Go to About Page
    </button>
  );
}

📌 Dynamic Route Setup

Dynamic route সাধারণত details page-এর জন্য ব্যবহার করা হয়।


// App.js
<Route path="/user/:id" element={<UserDetails />} />

Dynamic parameter পড়তে:


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

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

  return <h2>User ID: {id}</h2>;
}

📌 Not Found (404 Page)


<Route path="*" element={<h1>404 - Page Not Found</h1>} />

📌 Nested Routes

Parent route এর মধ্যে child routes render করা যায়।


// App.js
<Route path="/dashboard" element={<Dashboard />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
</Route>

Dashboard component-এ <Outlet /> ব্যবহার করতে হবে:


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

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />  {/* এখানে child routes render হবে */}
    </div>
  );
}

🎯 Summary

React Router multi-page feel দেয়
BrowserRouter অ্যাপকে wrap করে
Routes & Route দিয়ে path তৈরি করা হয়
Link দিয়ে navigation
useNavigate programmatic redirect
Dynamic Routes & Nested Routes support করে

এই guide একটি student এর জন্য যথেষ্ট সহজ ও পরিষ্কার, যাতে React Router এর basic concepts সহজে শেখা যায়।

📌 Bonus Tip

Real-life projects এ আপনি protected routes, lazy loading, layout system ইত্যাদি ব্যবহার করবেন।

React Router Setup & Basics