8. What is React Router?

React Router is a standard library that enables navigation between different components in a React application while keeping the UI in sync with the URL.

It is the key to creating Single Page Applications (SPA) where the browser doesn't reload when you click a link.

Instant Loading: No white flash between pages.

Better UX: Transitions feel like a mobile app.

9. React Router Flow

User Clicks a <Link>
↓
Router checks the Path (URL)
↓
Match found in <Routes>
↓
Component swapped inside UI

The browser stays on the same index.html file, but the **content** inside changes dynamically.

10. Core Components

Component	Purpose
`BrowserRouter`	The brain—wraps your whole app to enable routing.
`Routes`	A container for all your possible page paths.
`Route`	Maps a specific URL (path) to a Component (element).
`Link`	The "React-way" to navigate (replaces <a> tag).

11. Important Rules

Rule 1: Always wrap <App /> or your main content in <BrowserRouter>.

Rule 2: Use the to attribute for Links, not href.

Rule 3: Never use standard <a> tags for internal links—it will force a full page reload and break the state.

// ✅ Correct Link
<Link to="/about">About Us</Link>

13. Simple Routing Setup

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

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

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

15. Traditional vs. React Router

Feature	Traditional Multi-Page	React SPA
Reload	Yes (Slow)	No (Instant)
Requests	Fresh HTML from Server	Client-side Component swap
State	Lost on refresh	Maintained across pages
Feel	Static Website	Dynamic Application

17. Real-Life Structure

Think of a professional dashboard:

[ Navbar - Always Visible ]
   |-- /dashboard → Summary Stats
   |-- /profile → User Settings
   |-- /billing → Invoice History
[ Footer - Always Visible ]

18. Practice Tasks

Task 1: Create a 3-page site (Home, About, Contact).

Task 2: Build a Student Portal (Dashboard, Profile, Settings).

Task 3: Build an E-commerce flow (Products → Cart → Checkout).

Task 4: Create a Nav menu that stays at the top while content changes below.

19. Learning Flow

Props → State → Events → Hooks → Router (Complete)

↓

Next Level: API Fetching → Redux/Context → Real World Project