React Router

// npm install react-router-dom
import { BrowserRouter, Routes, Route, Link, useNavigate, useParams } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/users">Users</Link>
      </nav>
      
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />} />
        <Route path="/users/:id" element={<UserDetail />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

// Dynamic route — URL params
function UserDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetch(`/api/users/${id}`).then(r => r.json()).then(setUser);
  }, [id]);
  
  return (
    <div>
      <button onClick={() => navigate(-1)}>← Back</button>
      <h1>{user?.name}</h1>
    </div>
  );
}

// Protected route
function PrivateRoute({ children }) {
  const isAuthenticated = useAuth(); // custom hook
  return isAuthenticated ? children : <Navigate to="/login" replace />;
}