Setting Up React Router

npm install react-router-dom

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App.jsx";
import "./index.css";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);
src/App.jsx
jsx
import { Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
import Home from "./pages/Home";
import Courses from "./pages/Courses";
import About from "./pages/About";

function App() {
  return (
    <div>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/courses" element={<Courses />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </div>
  );
}

export default App;

src/
├── components/
│   ├── Navbar.jsx
│   └── CourseCard.jsx
├── pages/
│   ├── Home.jsx
│   ├── Courses.jsx
│   └── About.jsx
├── App.jsx
└── main.jsx