Programmatic Navigation and useSearchParams0%
The Prop Drilling Dilemma and Context Solution

Programmatic Navigation and useSearchParams

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

Programmatic Navigation and useSearchParams

1. What is Programmatic Navigation?

Declarative navigation using <Link> and <NavLink> works when a user clicks a visible hyperlink. However, real-world applications frequently require navigation in response to code execution:

  • Redirecting a user to their dashboard immediately after a successful login.
  • Navigating to an order confirmation screen after completing a checkout payment.
  • Redirecting an unauthorized user back to the sign-in page.

In React Router v6+, programmatic navigation is executed using the useNavigate hook.

JSX
import React from 'react';
import { useNavigate } from 'react-router-dom';
 
export default function LoginForm() {
const navigate = useNavigate();
 
const handleLogin = async (e) => {
e.preventDefault();
const token = await authenticateUser();
 
if (token) {
// Programmatically navigate to dashboard route
navigate('/dashboard');
 
// Or replace history entry (user cannot click browser "Back" into login screen)
// navigate('/dashboard', { replace: true });
}
};
 
return <form onSubmit={handleLogin}><button type="submit">Log In</button></form>;
}

Delta Navigation (Back & Forward)

useNavigate also allows navigating through browser history:

JSX
navigate(-1); // Equivalent to clicking browser "Back" button
navigate(1); // Equivalent to clicking browser "Forward" button

2. Managing Query Strings with useSearchParams

URL Query Strings (search parameters) are the key-value pairs appended after a ? in the URL:

Output
/courses?category=frontend&sort=rating&page=2

Query strings are ideal for shareable UI states: filters, search terms, pagination, and sorting.

React Router provides useSearchParams, which functions similarly to React's useState, returning:

  1. 1
    searchParams: A modern URLSearchParams object to read current query parameters.
  2. 2
    setSearchParams: An updater function to modify URL parameters programmatically.
JSX
import React from 'react';
import { useSearchParams } from 'react-router-dom';
 
export default function SearchableCatalog() {
const [searchParams, setSearchParams] = useSearchParams();
 
// 1. Read query parameters (defaults provided if missing)
const category = searchParams.get('category') || 'all';
const sort = searchParams.get('sort') || 'popular';
 
// 2. Update query parameters in URL
const handleCategoryChange = (newCategory) => {
setSearchParams({
category: newCategory,
sort: sort // Preserve other query parameters
});
};
 
return (
<div className="catalog-filters">
<h3>Active Category: {category}</h3>
 
<div className="btn-group">
<button onClick={() => handleCategoryChange('frontend')}>Frontend</button>
<button onClick={() => handleCategoryChange('backend')}>Backend</button>
<button onClick={() => handleCategoryChange('data')}>Data Science</button>
</div>
</div>
);
}

3. Why Query Params Beat Component State for Search

If an e-commerce catalog stores filters in local useState, when a student finds a great set of courses and copies the URL to send to a friend, the filters are lost because the URL only says /courses.

When filters are stored in searchParams:

  • The URL becomes /courses?category=frontend&sort=rating.
  • Users can bookmark the page, refresh the browser, or share the link with colleagues, and the exact same filtered state will load immediately!
Interactive Quiz

Practice Quiz

Question 1
What hook in React Router v6 is used for programmatic navigation?
Question 2
How do you simulate clicking the browser's native "Back" button using useNavigate?
Question 3
What option should be passed to navigate('/dashboard', { replace: true }) and why?
Question 4
What hook is used to read and update URL query strings (e.g. ?category=react&page=1) in React Router?
Question 5
Why is storing search and filter criteria in URL search parameters preferable to storing them in local component useState?
Next Lesson

The Prop Drilling Dilemma and Context Solution

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Dynamic URL Parameters with useParamsThe Prop Drilling Dilemma and Context Solution

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext