Query Parameters (Search Parameter)

🔍 What Are Query Parameters?

Query parameters (also called search params) are key–value pairs added to the URL after ?.

Example URLs

/products?category=mobile
/products?category=laptop&price=low
/search?q=react

📌 They are commonly used for:

• Search

• Filters

• Sorting

• Pagination

🆚 Query Params vs Route Params

🪝 What Is useSearchParams()?

• A hook from React Router v6

• Used to read and update query strings

• Similar to useState, but synced with the URL

Basic Syntax

const [searchParams, setSearchParams] = useSearchParams();

📖 Reading Query Parameters

Example URL

/search?q=react&page=2

Read Params

const query = searchParams.get('q');
const page = searchParams.get('page');

📌 Returns string | null

✍️ Updating Query Parameters

Set Params

setSearchParams({ q: 'react', page: 1 });

Update Existing Params

setSearchParams(prev => {
  prev.set('q', 'javascript');
  return prev;
});

📌 Updating search params changes the URL but does not reload the page.

🛠️ Hands-On: Search Page

Route Definition

<Route path="/search" element={<Search />} />

src/pages/Search.jsx

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

function Search() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';

  return (
    <div>
      <h2>Search Page</h2>

      <input
        value={query}
        onChange={(e) =>
          setSearchParams({ q: e.target.value })
        }
        placeholder="Search..."
      />

      <p>Searching for: {query}</p>
    </div>
  );
}

export default Search;

🧪 URL Output

Typing react results in:

/search?q=react

Refreshing the page keeps the search state ✅

🛒 Hands-On: Filter Products via URL

Example URL

/products?category=mobile

Route Definition

<Route path="/products" element={<Products />} />

src/pages/Products.jsx

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

function Products() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category') || 'all';

  return (
    <div>
      <h2>Products</h2>

      <button onClick={() => setSearchParams({ category: 'mobile' })}>
        Mobile
      </button>

      <button onClick={() => setSearchParams({ category: 'laptop' })}>
        Laptop
      </button>

      <button onClick={() => setSearchParams({ category: 'all' })}>
        All
      </button>

      <p>Selected Category: {category}</p>
    </div>
  );
}

export default Products;

🧠 Key Benefits of Query Params

• Shareable URLs

• Bookmark-friendly

• State persists on refresh

• Great for SEO (when combined with SSR)

⚠️ Common Mistakes

• ❌ Expecting numbers instead of strings

• ❌ Using useParams for query strings

• ❌ Forgetting default values

• ❌ Overwriting all params accidentally

✅ Best Practices

• Always provide fallback values

• Keep query params small and readable

• Use query params for optional data

• Use route params for required identity