Introduction to React Router

Traditional Multi-Page App (Server-Side Routing):
/           → Server sends home.html
/about      → Server sends about.html (full page reload!)
/contact    → Server sends contact.html (full page reload!)

Single-Page App (Client-Side Routing):
/           → React renders <Home />
/about      → React renders <About /> (no page reload!)
/contact    → React renders <Contact /> (no page reload!)

// ❌ Manual routing - Don't do this!
function App() {
  const [page, setPage] = React.useState('home')
  
  const renderPage = () => {
    switch (page) {
      case 'home':
        return <Home />
      case 'about':
        return <About />
      case 'contact':
        return <Contact />
      default:
        return <Home />
    }
  }
  
  return (
    <div>
      <nav>
        <button onClick={() => setPage('home')}>Home</button>
        <button onClick={() => setPage('about')}>About</button>
        <button onClick={() => setPage('contact')}>Contact</button>
      </nav>
      
      {renderPage()}
    </div>
  )
}

// Problems:
// 1. URL doesn't change - can't bookmark or share
// 2. Browser back button doesn't work
// 3. No page history
// 4. Have to manage state manually
// 5. No nested routes
// 6. Can't use browser navigation

// ✅ With React Router - Much better!
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'

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

// Benefits:
// ✅ URL changes automatically
// ✅ Browser back/forward works
// ✅ History maintained
// ✅ Shareable URLs
// ✅ Nested routes supported
// ✅ Works with browser navigation

# Install React Router
npm install react-router-dom

# This installs React Router DOM version 6
# (The latest and recommended version)

// index.js or main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
)

// BrowserRouter provides routing context to entire app

// pages/Home.jsx
function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to our website!</p>
    </div>
  )
}

// pages/About.jsx
function About() {
  return (
    <div>
      <h1>About Page</h1>
      <p>Learn more about us here.</p>
    </div>
  )
}

// pages/Contact.jsx
function Contact() {
  return (
    <div>
      <h1>Contact Page</h1>
      <p>Get in touch with us.</p>
    </div>
  )
}

export { Home, About, Contact }

// App.jsx
import { Routes, Route, Link } from 'react-router-dom'
import { Home, About, Contact } from './pages'

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

export default App

import { BrowserRouter } from 'react-router-dom'

// Wrap your entire app
<BrowserRouter>
  <App />
</BrowserRouter>

// What it does:
// - Keeps UI in sync with URL
// - Uses HTML5 history API
// - Provides routing context
// - Should be at top level (usually in index.js)

// Note: Only use one BrowserRouter per app!

import { Routes, Route } from 'react-router-dom'

<Routes>
  {/* Each Route defines a path and what to render */}
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/users" element={<Users />} />
</Routes>

// Routes:
// - Container for all Route components
// - Matches current URL to routes
// - Renders the first matching Route

// Route:
// - path: URL pattern to match
// - element: Component to render when matched

// Example URL matching:
// /           → Renders <Home />
// /about      → Renders <About />
// /users      → Renders <Users />
// /not-found  → Renders nothing (404)

import { Link } from 'react-router-dom'

// Basic link
<Link to="/about">About Us</Link>

// Link with styling
<Link to="/contact" className="nav-link">
  Contact
</Link>

// What it does:
// - Renders an <a> tag
// - Prevents full page reload
// - Updates URL
// - Maintains app state
// - Updates browser history

// ❌ Don't use regular <a> tags!
<a href="/about">About</a>  // This causes full page reload!

// ✅ Use Link instead
<Link to="/about">About</Link>  // This uses client-side routing

import { NavLink } from 'react-router-dom'

// NavLink automatically adds 'active' class when route matches
<nav>
  <NavLink to="/">Home</NavLink>
  <NavLink to="/about">About</NavLink>
  <NavLink to="/contact">Contact</NavLink>
</nav>

// Custom active styling
<NavLink 
  to="/about"
  className={({ isActive }) => isActive ? 'active-link' : 'link'}
>
  About
</NavLink>

// With inline styles
<NavLink 
  to="/about"
  style={({ isActive }) => ({
    color: isActive ? 'red' : 'blue'
  })}
>
  About
</NavLink>

// Perfect for navigation menus!

// App.jsx
import { Routes, Route, Link, NavLink } from 'react-router-dom'
import './App.css'

// Page components
function Home() {
  return (
    <div className="page">
      <h1>Home Page</h1>
      <p>Welcome to our website!</p>
    </div>
  )
}

function About() {
  return (
    <div className="page">
      <h1>About Us</h1>
      <p>We build amazing React applications.</p>
    </div>
  )
}

function Services() {
  return (
    <div className="page">
      <h1>Our Services</h1>
      <ul>
        <li>Web Development</li>
        <li>Mobile Apps</li>
        <li>Consulting</li>
      </ul>
    </div>
  )
}

function Contact() {
  return (
    <div className="page">
      <h1>Contact Us</h1>
      <form>
        <input type="email" placeholder="Your email" />
        <textarea placeholder="Your message" />
        <button type="submit">Send</button>
      </form>
    </div>
  )
}

function NotFound() {
  return (
    <div className="page">
      <h1>404 - Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link to="/">Go Home</Link>
    </div>
  )
}

// Main App component
function App() {
  return (
    <div className="app">
      {/* Header with Navigation */}
      <header>
        <div className="logo">MyApp</div>
        <nav>
          <NavLink to="/" end>Home</NavLink>
          <NavLink to="/about">About</NavLink>
          <NavLink to="/services">Services</NavLink>
          <NavLink to="/contact">Contact</NavLink>
        </nav>
      </header>
      
      {/* Main Content */}
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/services" element={<Services />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
      
      {/* Footer */}
      <footer>
        <p>&copy; 2024 MyApp. All rights reserved.</p>
      </footer>
    </div>
  )
}

export default App

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: #1e40af;
  color: white;
}

.logo {
  font-size: 1.5rem;
  font-weight: bold;
}

nav {
  display: flex;
  gap: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  transition: background 0.2s;
}

nav a:hover {
  background: rgba(255, 255, 255, 0.1);
}

nav a.active {
  background: rgba(255, 255, 255, 0.2);
  font-weight: bold;
}

main {
  flex: 1;
  padding: 2rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.page {
  animation: fadeIn 0.3s;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

footer {
  padding: 1rem;
  text-align: center;
  background: #f3f4f6;
  border-top: 1px solid #e5e7eb;
}

import { Routes, Route, Link } from 'react-router-dom'

function NotFound() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you're looking for doesn't exist.</p>
      <Link to="/">Go back home</Link>
    </div>
  )
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
      
      {/* Catch-all route - must be last! */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  )
}

// path="*" matches any URL that wasn't matched above
// Always put this route last!