React Router

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

// 1. A Component using URL Parameters
function UserProfile() {
  const { userId } = useParams(); // Extracts the dynamic part of the URL
  return <h2>Viewing Profile for User: {userId}</h2>;
}

// 2. A Component with Programmatic Navigation
function Login() {
  const navigate = useNavigate();
  const handleLogin = () => {
    // Simulate API call
    setTimeout(() => navigate('/dashboard'), 1000); 
  };
  return <button onClick={handleLogin}>Log In</button>;
}

// 3. The Router Setup
export default function App() {
  return (
    <BrowserRouter>
      <nav>
        {/* Use <Link> instead of <a> to avoid full page reloads */}
        <Link to="/">Home</Link> | 
        <Link to="/user/123">Profile 123</Link> | 
        <Link to="/login">Login</Link>
      </nav>

      <Routes>
        <Route path="/" element={<h1>Home Page</h1>} />
        <Route path="/login" element={<Login />} />
        {/* The :userId is a dynamic URL parameter */}
        <Route path="/user/:userId" element={<UserProfile />} />
        {/* A Catch-All route for 404s */}
        <Route path="*" element={<h2>404 Not Found</h2>} />
      </Routes>
    </BrowserRouter>
  );
}