URL Parameters and Query Strings

// <Route path="/users/:id" element={<UserPage />} />
import { useParams } from 'react-router-dom';

function UserPage() {
  const { id } = useParams();       // /users/7  ->  id = "7"
  return <h2>User #{id}</h2>;
}

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

function Products() {
  const [params, setParams] = useSearchParams(); // /products?sort=price
  const sort = params.get('sort') ?? 'name';
  return <button onClick={() => setParams({ sort: 'price' })}>Sort: {sort}</button>;
}