🧭 React Navigation & Routing

🔹 1. Why We Need Routing

In HTML, we can create navigation bars using <a> tags, but every time we click a link, the entire page reloads.
This makes navigation slower because each page loads a new HTML file.

In React, navigation happens inside a single HTML file using JavaScript, so the page doesn’t reload.
👉 It gives a smooth and fast user experience.

---

🔹 2. Example – Navigation in HTML vs React

HTML Example:

<a href="home.html">Home</a>
<a href="contact.html">Contact</a>

➡ Each click reloads the page.

React Example (Using React Router):

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

➡ No page reload — React updates the view dynamically.

---

🔹 3. React Router Setup

In React, we use BrowserRouter to define all routes in one place — usually in App.js.

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

✅ Advantage:
We no longer need to add the navigation bar to each page manually — React Router handles everything in one place.

---

🔹 4. URL Example (Dynamic Navigation)

When we visit a site like Myntra, the URL changes dynamically:

myntra.com/clothes
myntra.com/clothes/tshirts
myntra.com/clothes/jeans

Even though the URL changes, the page doesn’t reload — React just updates the DOM smoothly.

---

🔹 5. Nested Routes

Nested routing means creating routes inside another route.
Example: /dashboard/clothes, /dashboard/makeup

We define nested routes inside a parent route, and the nested components render inside the parent using an Outlet.

import { BrowserRouter, Routes, Route, Link, Outlet } from "react-router-dom";

function Dashboard() {
  return (
    <div>
      <h2>Dashboard</h2>
      <nav>
        <Link to="clothes">Clothes</Link>
        <Link to="makeup">Makeup</Link>
      </nav>
      <Outlet /> {/* Nested components will render here */}
    </div>
  );
}

function Clothes() {
  return <h3>Clothes Section</h3>;
}

function Makeup() {
  return <h3>Makeup Section</h3>;
}

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="clothes" element={<Clothes />} />
          <Route path="makeup" element={<Makeup />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

✅ Result:

• /dashboard → shows Dashboard
• /dashboard/clothes → shows Clothes inside Dashboard
• /dashboard/makeup → shows Makeup inside Dashboard

---

💡 In Short:

Concept	HTML	React
Navigation	Reloads full page	Updates single page dynamically
Setup	Separate HTML files	One BrowserRouter for all routes
Nested Pages	Not possible	Easy with Outlet
Experience	Slow	Fast & smooth

---