React Router enables navigation between different pages in a single-page application (SPA) without refreshing the page. 🎉

✅ Why Use React Router?

✔️ Enables client-side routing 🏎️

✔️ No full-page reloads 🚀

✔️ Dynamic & nested routing 📍

🎯 1. Installing React Router

📌 First, install React Router in your project:

npm install react-router-dom

🎯 2. Basic Routing in React 🏠

✅ Step 1: Setup Routes in App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

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

export default App;

🔹 <BrowserRouter> wraps the entire app.

🔹 <Routes> contains all defined routes.

🔹 <Route path="/" element={<Home />}> loads Home on /.

🎯 3. Creating Pages for Routing 📄