Route Parameters & Query Strings in React Router Explained

Route Parameters & Query Strings in React Router Explained with Examples

When building a dynamic React app, you often need to pass data through URLs — like product IDs, user names, or search filters.

For example:

/users/101 → Display details for user 101
/products?id=23 → Show product with ID 23

In React Router, we handle this using Route Parameters and Query Strings.

Route Parameters

What Are Route Parameters?

Route Parameters allow you to create dynamic URLs that change based on user interaction.
They are defined using colon syntax (:) in the route path.

Example:
/users/:id → :id is a route parameter that can hold dynamic values like 1, 2, 3, etc.

Example: User Profile Route

import React from "react";
import { BrowserRouter, Routes, Route, useParams, Link } from "react-router-dom";

function UserProfile() {
  // Extract the route parameter using useParams
  const { id } = useParams();

  return <h2>👤 Viewing Profile of User ID: {id}</h2>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/user/101">User 101</Link> |{" "}
        <Link to="/user/102">User 102</Link>
      </nav>

      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Explanation:

/user/:id defines a dynamic route.
useParams() extracts the id from the URL.
Navigating to /user/101 displays User ID: 101.

Multiple Parameters Example

If the URL is /product/electronics/45,
then:

Useful for eCommerce or dashboard apps.

Query Strings

What Are Query Strings?

Query strings appear after a question mark (?) in a URL.
They are used for optional parameters, filters, or search terms.

Example:

Example: Reading Query Strings

To read query strings, we use the useLocation() hook from react-router-dom.

import React from "react";
import { BrowserRouter, Routes, Route, useLocation, Link } from "react-router-dom";

function SearchPage() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  const term = queryParams.get("term");
  const category = queryParams.get("category");

  return (
    <div>
      <h2>🔍 Search Page</h2>
      <p>Search Term: {term}</p>
      <p>Category: {category}</p>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/search?term=react&category=tutorial">Search React Tutorials</Link>
      </nav>

      <Routes>
        <Route path="/search" element={<SearchPage />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Explanation:

useLocation() gets the current URL object.
URLSearchParams lets you extract query values easily.
Works great for search pages, filters, or sorting options.

Adding Query Strings Programmatically

You can navigate with query parameters using the useNavigate() hook:

import { useNavigate } from "react-router-dom";

function SearchButton() {
  const navigate = useNavigate();

  const handleSearch = () => {
    navigate("/search?term=hooks&category=react");
  };

  return <button onClick={handleSearch}>Search React Hooks</button>;
}

This allows you to change routes with parameters dynamically in your app logic.

Route Parameters vs Query Strings

Feature	Route Parameters	Query Strings
URL Format	`/user/101`	`/search?term=react`
Purpose	Identify a specific record or path	Filter, sort, or search
Optional?	Usually required	Optional
Access Method	`useParams()`	`useLocation()` + `URLSearchParams`
SEO Friendly?	✅ Yes	✅ Yes (depends on context)
Example Use Case	`/product/45`	`/products?category=phones`

Combining Route Params & Query Strings

You can use both together for advanced routing.

Example:

import { useParams, useLocation } from "react-router-dom";

function UserPage() {
  const { id } = useParams();
  const query = new URLSearchParams(useLocation().search);
  const tab = query.get("tab");

  return (
    <h3>
      Viewing User {id}, Tab: {tab}
    </h3>
  );
}

Output for /user/101?tab=posts → “Viewing User 101, Tab: posts”

Common Mistakes

Forgetting to wrap your routes inside BrowserRouter or HashRouter
Misspelling parameter names (useParams name must match the route definition)
Using window.location instead of useLocation (causes full reload)
Not encoding query strings properly when passing dynamic values