React Query Parameters Explained — URL Search Params and Route Params

In this tutorial, you will learn about React Query Parameters Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

React query parameters come in two forms: route parameters (dynamic segments in the URL path) and search parameters (key-value pairs after the question mark), both managed through React Router hooks.

What You'll Learn

• How to read route parameters with useParams
• How to read and set search params with useSearchParams
• How to keep UI state in the URL
• How to build filterable pages

Why It Matters

URL parameters make pages shareable and bookmarkable. A filtered product list with query params preserves filters across page refreshes and lets users share specific views.

import { useParams, useSearchParams } from "react-router-dom";

function ProductPage() {
  const { id } = useParams();
  const [searchParams, setSearchParams] = useSearchParams();
  const variant = searchParams.get("variant") || "default";

  return (
    <div>
      <h1>Product {id}</h1>
      <p>Variant: {variant}</p>
      <button onClick={() => setSearchParams({ variant: "large" })}>
        Large Variant
      </button>
    </div>
  );
}

Expected output: /products/123?variant=large displays product 123 with the large variant selected.