Home > frontend > Easy Way To Implement URLSearchParams In React App Using ReactRouter (useSearchParams Hook).

Easy Way To Implement URLSearchParams In React App Using ReactRouter (useSearchParams Hook).

React router has been a key package for implementing navigation in React Apps. Its useSearchParams hook is a unique feature for storing data in the URL.

By :Thomas Inyangđź•’ 26 Jan 2025

searchparams

Introduction

In a website, the use of searchParams enables the storage and management of data directly in the URL, making it globally accessible across the app.


As a front-end developer working with ReactJS, you'll often use URL query parameters in projects like e-commerce sites, product listings, or any website with search and filter functionalities. With the data in the URL, users can share, bookmark, or revisit specific app states anytime.


To achieve the implementation of URLSearchParams in a React App, you can leverage the useSearchParams hook from React Router which is capable of handling query parameters simply and efficiently.


In this post, you'll learn about the following:

  1. How to setup useSearchParams hook (React Router) in your ReactJs application.
  2. Perform filtration of product by category using a mock product list.
  3. Perform a search of an item(s).
  4. Best Practices for Managing Query Parameters

Prerequisite

  1. Vite for React.
  2. React Router knowledge.

Why is URL Query Parameters Important In A Website?

Assume you're shopping online and wish to sort things by category, price, or brand. Or perhaps you're looking for flights and want to sort the results by price. These dynamic actions are powered by URL query parameters, which allow a page's content to update quickly without reloading.


Aside from improving user experience, query parameters make it simple to share or bookmark specific search results, allowing users to return to previously filtered material or share it with others. This enhances navigation, accessibility, and overall usability, making query parameters an essential component for modern web applications.


When developing a Single Page Application (SPA) built with ReactJS, you can use the React Router and useSearchParams hook to manage these parameters to smoothly improve both the user experience and your app's performance. Let's see how to use it.

How to Get Started with React Router and useSearchParams Hook.

Install the react-router

npm i react-router-dom

This will install react-router.

If this is your first time using react-router, update the main.jsx/tsx file with this.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router";
import App from "./app";
const root = document.getElementById("root");
ReactDOM.createRoot(root).render(
<StrictMode>
<BrowserRouter>
<Routes>
<Route path="/" element={<App />} />
</Routes>
</BrowserRouter>
</StrictMode>
);

With this, you've successfully enabled routing in your React app.

See Also: How to Implement Dynamic Routing In a React App.

How to Implement Filtration of Product Using ReactRouter.

In this section, you'll filter a list of products based on their category.

Step1

Create a reusable product type, types.d.ts file in the src dir.

export interface Product {
sku: string;
name: string;
desc: string;
qty: number;
category: string;
price: number;
discount: number;
}

Step2.

Create a mock data similar to what you'd be getting from your backend.

For this guide post, create a productData.ts file in the src dir and enter this.

import { Product } from "./types";
export const products: Product[] = [
{
sku: "iph2838",
name: "iPhone 12",
desc: "clear camera",
qty: 10,
category: "phones",
price: 10000,
discount: 0,
},
{
sku: "sam4138",
name: "Samsung s21",
desc: "super fast",
qty: 10,
category: "phones",
price: 50303,
discount: 0,
},
{
sku: "hp394",
name: "HP pavilion G6",
desc: "Long lasting battery",
qty: 5,
category: "laptops",
price: 10000,
discount: 0,
},
{
sku: "hp004",
name: "HP EliteBook",
desc: "Long lasting battery",
qty: 5,
category: "laptops",
price: 130000,
discount: 0,
},
{
sku: "del994",
name: "Dell latitude",
desc: "Super fast system",
qty: 5,
category: "laptops",
price: 130000,
discount: 0,
},
];

Step3

For filtration setup.

In the components folder create a FilterParams.txs file and enter this code.

import React from "react";
import { useSearchParams } from "react-router";
import { products } from "../productData";
import { Product } from "../types";
export default function FilterParams() {
const [filterParams, setFilterParams] = useSearchParams();
const category = filterParams.get("category") || "all";
const [filterResult, setFilterResult] = React.useState<Product[]>();
const updateResult = () => {
if (category != "all") {
const temp: Product[] = products.filter((el) => el.category != category);
setFilterResult(temp);
}
};
const handleFilterChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
setFilterParams({ category: event.target.value });
updateResult();
};
return (
<div>
<label>
Filter by category
<select onChange={handleFilterChange} value={category}>
<option value="all">All</option>
<option value="phones">Phones</option>
<option value="laptops">Laptops</option>
</select>
</label>
<h1>Showing results for: {category}</h1>
<ul>
{category == "all"
? products.map((product: Product, index: number) => (
<li key={index}>{product.name}</li>
))
: filterResult?.map((product: Product, index: number) => (
<li key={index}>{product.name}</li>
))}
</ul>
</div>
);
}

In the code above, you’ve done the following:

  1. The useSearchParams() hook is imported. “filterParams” is used to store the key and value.
  2. The value is obtained using filterParams.get and stored in the category variable.
  3. The updateResult () function is initialized and used in the onChange function handleFilterChange.
  4. The handleFilterChange () function is used to effect change when an option is selected and it also triggers the updateResult () function.
  5. There are two conditions to display contents, when the category value is all and when there is a selected option, the filtered results are displayed based on the selected value.

How to Implement Search of Product Using ReactRouter.

Building a Search Bar with `useSearchParams`.

In the components folder create a SearchParams.txs file and enter this code.

import { useSearchParams } from "react-router";
import { products } from "../productData";
import React from "react";
import { Product } from "../types";
export default function SearchParams() {
const [searchParams, setSearchParams] = useSearchParams();
const name = searchParams.get("name") || "";
const [searchResult, setSearchResult] = React.useState<Product[]>();
const updateResult = () => {
if (name != "") {
const temp = products.filter((el) =>
el.name.toLowerCase().includes(name.toLowerCase())
);
setSearchResult(temp);
}
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setSearchParams({ name: event.target.value });
};
return (
<div>
//search bar component
<label>
Search by product name
<input
type="text"
name="product"
id="product"
value={name}
onChange={handleChange}
/>
</label>
<button type="submit" onClick={updateResult}>
find
</button>
<h1>Showing results for: {name}</h1>
<ul>
{searchResult?.map((product: Product, index: number) => (
<li key={index}>{product.name}</li>
))}
</ul>
</div>
);
}

In this code, the following changes were made when compared with filtering by category.

  1. You've created a search bar component where users can share URLs and get the same results.
  2. In the updateResult function, the product name and the user search values are transformed to lowercase, this will address the inconsistency in matching the product name and search values.
  3. When items matching the entered search values are found, the searchResult is updated.
  4. The search result is then displayed.

Update the main.tsx file with the following routes.

<Route path="/filter" element={<FilterParams />} />
<Route path="/search" element={<SearchParams />} />

In this code, you can now navigate through the filter (localhost:5173/filter) and search (localhost:5173/search) pages.

In the filter page, when a category is selected the URL is updated based on the selected value e.g http://localhost:5173/filter?category=phones


In the search page, when a value is entered into the search field and the find button is hit, the URL is updated based on the value entered e.g http://localhost:5173/search?name=dell

Why Does URL Search Params Matters?

URL search parameters are necessary because they enable users to bookmark or share URLs while maintaining the search state. This ensures that users can return to the same page or results later. They also improve navigation and accessibility, making your application more user-friendly and intuitive.

Best Practices for Managing Query Parameters

  1. Avoid overloading the URL: To keep URLs clean and shared, only store necessary states such as filters or pagination. It’s better to have a separation of concerns.
  2. Combine with State Management: For global or UI-related states, use Redux, React Context API, or other state management framework, while the URL is reserved for persistent, shareable states such as search queries or filters.
  3. Debounce Input Changes: Delay URL changes while typing quickly (e.g., 300ms) to avoid performance difficulties and decrease unnecessary API calls or re-renders.in this guide post, the re-rendering option was not used. Invoking a search function was used instead hence the “find” button.
  4. Use URL Encoding/Decoding: Encode special characters in query parameters to avoid problems and ensure proper handling of reserved characters such as & and =. In this case, useSeachParams handles encoding and decoding perfectly.
  5. Implement Error Handling: To ensure a pleasant user experience, validate query parameters on page load and provide fallback values or user-friendly notifications for incorrect inputs.

See Also: How to Use Isometric Icons In Your ReactJs App

Conclusion

In this guide post, you learned how understanding useSearchParams in ReactJS enables you to create dynamic, user-friendly applications. Whether filtering data, enabling shareable search capabilities, or managing the URL query string, making good use of query parameters improves both user experience and app performance.


Also, you saw some best practices for managing query parameters which when adopted will result in building scalable, maintainable systems that users like engaging with.


Start integrating useSearchParams immediately to create more engaging, intuitive, and powerful applications.

Please Share.


You may also like