React Router DOM দিয়ে App.jsx

---

✅ 1️⃣ প্রথমে install করো

npm install react-router-dom

---

✅ 2️⃣ main.jsx (বা index.js) এ BrowserRouter wrap করো

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

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

---

✅ 3️⃣ App.jsx এ Route Setup

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

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

        {/* Dynamic Route Example */}
        <Route path="/user/:id" element={<User />} />

        {/* 404 Page */}
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

export default App;

---

✅ 4️⃣ Example Page (Home.jsx)

const Home = () => {
  return <h1>Home Page</h1>;
};

export default Home;

---

✅ 5️⃣ Navigation Link ব্যবহার

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

<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>

---

✅ Dynamic Route Access (Example)

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

const User = () => {
  const { id } = useParams();

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

export default User;