useSearchParams

This hook is only available in NextJs (App Router)

The useSearchParams hook allows you to read the URL query string parameters in your component. For example:


http://localhost:3000/products?page=2&filter=featured

You can use the useSearchParams hook to read everything after /products.

It returns the read-only version of the URLSearchParams interface.


"use client";
 
import { useSearchParams } from "next/navigation";
 
export default function SearchBar() {
  const searchParams = useSearchParams();
 
  const search = searchParams.get("search");
 
  // URL -> `/dashboard?search=my-project`
  // `search` -> 'my-project'
  return <>Search: {search}</>;
}

Examples

Reading a search terms

Suppose you have a URL like this:


/products?search=shoes

You can use this hook to get the query parameters as follows:


"use client";
 
import { useSearchParams } from "next/navigation";
 
export default function ProductList() {
  const searchParams = useSearchParams();
  const searchTerm = searchParams.get("search");
 
  return <h1>Searching for: {searchTerm}</h1>;
}

Pagination


/blog?page=2


"use client";
 
import { useSearchParams } from "next/navigation";
 
export default function Blog() {
  const searchParams = useSearchParams();
  const page = parseInt(searchParams.get("page") || "1");
 
  // parseInt() is used to return an integer
 
  return <p>You are on page {page}</p>;
}

Toggle view modes


/dashboard?view=grid


"use client";
 
import { useSearchParams } from "next/navigation";
 
export default function Dashboard() {
  const searchParams = useSearchParams();
  const viewMode = searchParams.get("view") || "list";
 
  return (
    <div>
      <p>View mode: {viewMode}</p>
      {viewMode === "grid" ? <GridView /> : <ListView />}
    </div>
  );
}

useSearchParams does not cause re-renders when the URL changes using the browser back and forward buttons. 2. If you want to reload the page, use a combination of useSearchParams and useEffect.