04-react-router-dom.md

React Router DOM

Client-Side Routing

React Router enables navigation without page refreshes, allowing you to build multi-page experiences inside a Single Page Application (SPA).

Basic Routing Setup

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

function Home() { return <h2>Home Page</h2>; }
function About() { return <h2>About Page</h2>; }

export default 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>
  );
}

Dynamic Routes and Parameters

import { useParams } from 'react-router-dom';

function UserProfile() {
  let { username } = useParams();
  return <h3>User Profile: {username}</h3>;
}

// In Routes:
// <Route path="/user/:username" element={<UserProfile />} />

Practice Tasks

Task 1: Multi-page Portfolio Router

1. Create pages: Home, ProjectDetail (dynamic), and Contact.
2. Implement navigation links.
3. Pass dynamic IDs to ProjectDetail routes and render appropriate content based on the ID.