Route Params

Path Parameters

Define dynamic segments with :paramName in the route path. useParams() returns an object of current param values as strings.

Search params (?sort=price&page=2) are ideal for filters, pagination, and shareable UI state that is not part of the resource identity.

// Route: /products/:productId
function ProductPage() {
  const { productId } = useParams();
  const { data } = useQuery({
    queryKey: ['product', productId],
    queryFn: () => fetchProduct(productId),
  });
  return <ProductDetail product={data} />;
}

Always validate and parse params — they are untrusted strings from the URL.

Params vs Search Params

const { id } = useParams();           // /users/42
const [search, setSearch] = useSearchParams(); // ?tab=settings
const tab = search.get('tab');

• Params identify resources; search params modify view/filter.
• All param values are strings — parse numbers explicitly.
• setSearchParams updates query string and re-renders.
• Use generatePath to build URLs from patterns safely.

URL State Reference

Hooks for reading URL data.

Validating Route Params

Validate params before API calls. Invalid IDs should show 404 or error UI, not crash the app.

const { id } = useParams();
const productId = Number(id);
if (Number.isNaN(productId)) return <NotFound />;

URL as UI State

Storing filters, sort order, and pagination in search params makes views bookmarkable and shareable — prefer URL over local state for these concerns.

Common Mistakes

• Assuming params are numbers without parsing.
• Storing sensitive tokens in URL search params.
• Not encoding special characters in query values.
• Mixing param names between route definition and useParams.

Key Takeaways

• useParams() reads dynamic path segments.
• useSearchParams() manages query string state.
• Parse and validate param strings from URLs.
• Use search params for filters and pagination.