Routing in React isn't just about matching paths to components ā real applications need to read query strings, react to URL changes, and pass hidden data between routes. This lesson covers the location object, the useSearchParams hook, and how to use the URL itself as shareable application state.
1Beyond Paths
Managing the URL in a React app goes beyond mapping paths like /about to components. A URL is actually made up of several distinct parts ā the pathname (/store), the query string (?sort=price), and the hash fragment (#reviews) ā and real applications often need to read or react to each of these independently, not just match a route.
// URL Management: Location, Search, and StateURL Anatomy
Path, Query, Hash
2The useLocation Hook
The useLocation hook returns a location object describing the current URL, similar to the browser's native window.location, but reactive ā any component that calls useLocation automatically re-renders whenever the URL changes. This makes it well suited for tasks like sending a pageview to analytics every time the route changes.
import { useLocation } from 'react-router-dom';
const location = useLocation();
// location.pathname = '/search'
// location.search = '?q=react'Reactive URLs
Re-renders on change.
3Deconstructing Location
The location object exposes several useful properties: pathname is the URL path itself (e.g., /products), search is the raw query string including the leading ? (e.g., ?sort=asc), and hash is the fragment identifier after a # (e.g., #details). Destructuring these off useLocation() gives you direct access to each piece of the URL.
const [searchParams, setSearchParams] = useSearchParams();
const query = searchParams.get('q');Location Properties
pathname, search, hash
4Query Parameters (?key=value)
The raw location.search string is tedious to parse by hand, so React Router provides the useSearchParams hook as a dedicated, convenient interface for reading and updating query parameters instead of manually constructing a URLSearchParams object every time.
navigate('/checkout', { state: { fromCart: true } });
// Access via: const { state } = useLocation();useSearchParams
Manage query strings easily.
5The useSearchParams Hook
useSearchParams behaves almost exactly like useState: it returns a two-item array containing the current searchParams object and a setter function to update it, const [searchParams, setSearchParams] = useSearchParams(). If you're already comfortable with useState, this API should feel immediately familiar.
setSearchParams({ filter: 'completed' });Familiar API
[state, setState]
6Getting Search Params
The searchParams object provides a .get() method for pulling out the value of a specific parameter by name, such as searchParams.get('category'). It's important to remember that, like all URL parameters, values returned by .get() are always strings (or null if the parameter is absent), even if they represent numbers.
/* URL Management Module Completed */The .get() Method
Extracting values by key.
7Step-by-Step Breakdown
Beyond Paths. Managing the URL goes beyond just mapping paths (/about) to components. Often, you need to read the query string (like ?sort=desc), track the user's previous location, or pass hidden data during navigation. React Router provides hooks for all of this.
The useLocation Hook. The useLocation hook returns a location object that represents the current URL. Think of it like a window.location object, but it's reactive! Whenever the URL changes, any component using useLocation will automatically re-render.
Deconstructing Location. The location object contains several useful properties. pathname is the URL path (e.g., /about). search is the query string (e.g., ?q=react). hash is the fragment identifier (e.g., #top).
Which property of the location object contains the string after the '?' in a URL?
- āpathname
- āsearch
Query Parameters (?key=value). While location.search gives you the raw string (like ?sort=price&inStock=true), parsing that manually is annoying. React Router provides the useSearchParams hook, which gives you a convenient interface for reading and modifying query strings.
The useSearchParams Hook. useSearchParams behaves almost exactly like useState. It returns an array with two values: the current searchParams object, and a function to update them. This makes it incredibly intuitive if you already know React state.
Getting Search Params. The searchParams object provides a .get() method to retrieve the value of a specific parameter. Remember, just like URL parameters, the values returned are ALWAYS strings (or null if the parameter isn't in the URL).
If the URL is /shop?item=shoe, which hook should you use to easily get the value of item?
- āuseLocation
- āuseSearchParams
Setting Search Params. To update the URL query string, you use the setter function (e.g., setSearchParams). You pass it an object representing the new parameters. This will update the URL in the browser without reloading the page, making it perfect for filters or pagination.
Using URL as State. Best Practice: For things like active filters, current search terms, or pagination, store that data in the URL using search params INSTEAD of useState. Why? Because if the user copies the link and sends it to a friend, the friend will see the exact same filtered view!
Hidden Navigation State. Sometimes you want to pass data to the next route, but you DON'T want it visible in the URL string (e.g., passing a complex object or a security flag). You can attach hidden state to a navigation event using <Link state={...}> or navigate(path, { state: ... }).
Which property allows you to pass hidden data to the next component during a navigation event?
- āprops
- āstate
Accessing Hidden State. To read the hidden state passed from the previous route, you use the useLocation hook and access its .state property. Note: this state is stored in the browser's history memory, so it survives a page refresh, but NOT a copy-pasted link.
Replace vs Push History. By default, navigation PUSHES a new entry into the browser's history (meaning the 'Back' button will return to the previous page). Sometimes, like after a redirect, you want to REPLACE the current history entry so the user can't hit 'Back' to return to the redirect page.
Mastery Achieved. URL management mastery! You can now handle complex query parameters, shareable URL states, and hidden navigation payloads. You are truly a React Router professional.
Level Up š
Advanced cheat sheets, SEO tricks, and interview prep for this topic.
Browser Support
Fully supported.
Fully supported.
Fully supported.
Fully supported.
Accessibility (A11y)
1Route Changes Should Be Announced to Screen Reader Users
Client-side navigation with React Router doesn't trigger a full page reload, so screen readers won't automatically announce the new page ā move focus to the new page's heading or use an `aria-live` region on route change so the navigation is actually perceived.
2Filter and Sort Controls Backed by useSearchParams Still Need Labels
A dropdown or checkbox that updates `searchParams` on change is exactly as accessible as any other form control ā it still needs a properly associated `<label>` describing what it filters or sorts, independent of the fact that its value happens to live in the URL.
SEO Implications
- 1
Query Parameters Can Create Duplicate-Content Issues for Crawlers
URLs like `/products?sort=price` and `/products?sort=name` may be treated as distinct pages by search engines even though they show the same underlying content in a different order ā use canonical tags to point crawlers back to the primary URL when sort/filter parameters don't represent meaningfully different content.
- 2
Shareable, URL-Driven State Produces Crawlable, Linkable Pages
Storing filters or the active tab in `useSearchParams` instead of local `useState` means each distinct view has its own real URL that can be indexed, bookmarked, and shared ā content hidden behind local state alone is invisible to both users sharing links and search engines.
Best Practices
Store Shareable UI State in the URL, Not in useState
Active filters, search terms, sort order, and the active tab should live in `useSearchParams` rather than local component state, so a copied link reproduces the exact same view for anyone who opens it.
Use replace Navigation for Redirects, Not push
After a redirect (like `/login` sending the user to `/dashboard`), navigate with `{ replace: true }` so the redirect page isn't left in browser history ā otherwise clicking 'Back' returns the user to a page that immediately redirects them again.
Frequent Bugs
A filtered or sorted view resets to its default state whenever the page is refreshed or the link is shared.
The filter/sort value was stored in local `useState` instead of the URL. Move it into `useSearchParams` so the current view is encoded directly in the URL and survives refreshes and sharing.
Hidden navigation state passed via `navigate(path, { state })` is `undefined` when a user opens the link directly or refreshes after closing the tab.
History `state` lives in the browser's session history entry, not the URL itself, so it's unavailable on a fresh navigation or a copy-pasted link. Only rely on `location.state` for data that's safe to lose, and fall back to a default or redirect when it's missing.
Real-World Examples
Shareable Filtered Product List
An e-commerce category page stores its active filters and sort order in `useSearchParams` instead of component state, so a URL like `/shop?category=shoes&sort=price` reproduces the exact same filtered, sorted view for anyone who opens the link.
const [params, setParams] = useSearchParams();
const category = params.get('category');
const sort = params.get('sort') || 'relevance';