Programmatically update query params in React Router

To programmatically update query params in React Router, use the useSearchParams hook from ‘react-router-dom’. Using useSearchParams hook we can easily get and set the query string parameter in the current URL. The useSearchParams() hook return the searchParams and setSearchParams function. The searchParams.get(query) can be used to get the query params from the URL and setSearchParams() function can be used to set or update query parameters in the URL(current location).

Let us explain in detail.

The first step is to import useSearchParams hook from ‘react-router-dom’ as given below.

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

Next, use the useSearchParams hook to get the searchParams and setSearchParams function.

const [searchParams, setSearchParams] = useSearchParams();

To set or update the query params to the current location, use setSearchParams function and pass the query string name and value as an object like:

setSearchParams({query: value});

To get a query string param value from the current URL we use of searchParams.get(query).

let query = searchParams.get(query);

Here is an example that helps you to understand better.

We are going to create a search input field and when the user enters something in this search field, the value will be updated in the query string. Here is our sample code.

import React , { useState, useEffect }from "react";
import { useSearchParams  } from 'react-router-dom';

function App() {
	const [ search, setSearch] = useState("");
	const [searchParams, setSearchParams] = useSearchParams();

	useEffect(()=>{
		let searchValue = searchParams.get('search');
		setSearch(searchValue)
	}, [])

	const handleChange = event => {
		setSearch(event.target.value)
	  	setSearchParams({search: event.target.value});
	};

	return (
		<div>
			<input id="search" onChange={handleChange} value={search}/>
    	</div>
	);  	
}

export default App;

When the value in the input field gets changed, then handleChange function will be invoked. Inside the handleChange function, the new input value will be updated in the store as well as in the query string.

When the page is refreshed, the value in the search query string is taken using searchParams.get('search') and updated in the state thereby input field also gets updated with the param value as given below.

useEffect(()=>{
	let searchValue = searchParams.get('search');
	setSearch(searchValue)
}, [])

To use useSearchParams hook in a component, make sure to wrap the <App> component with the BrowserRouter component in index.js as given below.

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  	<React.StrictMode>
      	<BrowserRouter>
          	<App />
      	</BrowserRouter>      
  	</React.StrictMode>
);

reportWebVitals();

The BrowserRouter navigates using the browser's built-in history stack and stores the current location in the address bar using clean URLs.

Conclusion

We can programmatically update query params in React Router using the useSearchParams hook. It returns an array with 2 elements searchParams and setSearchParams function. The searchParams.get() method allows us to get query params from the URL and setSearchParams() function helps us to set or update query parameters to the current URL.