Route Parameters

Introduction

In the last lesson, every route you defined pointed at a fixed path — /about, /contact, and so on. Real applications also need dynamic routes, where part of the URL itself is data: a user's ID in /users/42, a product's slug in /products/wireless-mouse, or a search term in a query string like ?q=react.

React Router supports this with dynamic route segments and two Hooks for reading them: useParams for path segments like :id, and useSearchParams for query string values after a ?. This lesson covers both, and puts them together in a worked user-profile example.

Defining a Dynamic Route Segment

A dynamic segment is written in a Route's path using a colon prefix, like :id. React Router treats that segment as a variable — it matches any value in that position of the URL and makes it available to the matching component.

import { Routes, Route } from 'react-router-dom';
import UserList from './pages/UserList';
import UserProfile from './pages/UserProfile';

function App() {
  return (
    <Routes>
      <Route path="/users" element={<UserList />} />
      <Route path="/users/:id" element={<UserProfile />} />
    </Routes>
  );
}

export default App;

Visiting  /users/1   → renders <UserProfile /> with id = "1"
Visiting  /users/42  → renders <UserProfile /> with id = "42"
Visiting  /users/abc → renders <UserProfile /> with id = "abc"

The same UserProfile component handles every one of these URLs — it just needs a way to find out which id was actually requested. That is exactly what useParams provides.

Reading Parameters with useParams

The useParams Hook returns an object containing every dynamic segment defined in the matching route, keyed by the name used after the colon in the path.

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

function UserProfile() {
  const { id } = useParams();

  return (
    <div>
      <h2>User Profile</h2>
      <p>Viewing details for user ID: {id}</p>
    </div>
  );
}

export default UserProfile;

User Profile
Viewing details for user ID: 42

Reading Query Strings with useSearchParams

Query string parameters — the part of a URL after a ? — are read differently, since they are optional key/value pairs rather than part of the route's path structure. The useSearchParams Hook returns a URLSearchParams-like object and a function to update it, similar in spirit to useState.

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

// Handles a URL like /search?query=react&sort=recent
function SearchResults() {
  const [searchParams, setSearchParams] = useSearchParams();

  const query = searchParams.get('query') || '';
  const sort = searchParams.get('sort') || 'relevance';

  return (
    <div>
      <p>Results for: {query}</p>
      <p>Sorted by: {sort}</p>
      <button onClick={() => setSearchParams({ query, sort: 'newest' })}>
        Sort by Newest
      </button>
    </div>
  );
}

export default SearchResults;

Results for: react
Sorted by: recent

[Sort by Newest]  ← updates the URL to ?query=react&sort=newest

Notice that searchParams.get('query') returns null if the key is missing from the URL entirely, which is why the example falls back to an empty string or a default sort order.

Worked Example: A User Profile Page

Let's combine useParams with a small lookup to build a complete user-profile page that reads an ID from the URL and displays the matching user's data.

export const users = [
  { id: '1', name: 'Amol Chipte', role: 'Instructor' },
  { id: '2', name: 'Priya Sharma', role: 'Student' },
  { id: '3', name: 'Rahul Verma', role: 'Student' },
];

import { useParams, useSearchParams, Link } from 'react-router-dom';
import { users } from '../data/users';

function UserProfile() {
  const { id } = useParams();
  const [searchParams] = useSearchParams();
  const tab = searchParams.get('tab') || 'overview';

  const user = users.find((u) => u.id === id);

  if (!user) {
    return <p>No user found for ID: {id}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>Role: {user.role}</p>
      <p>Active tab: {tab}</p>

      <nav>
        <Link to={`/users/${id}?tab=overview`}>Overview</Link>
        <Link to={`/users/${id}?tab=activity`}>Activity</Link>
      </nav>
    </div>
  );
}

export default UserProfile;

Priya Sharma
Role: Student
Active tab: activity

Overview   Activity

The :id segment identifies which user to look up, while the ?tab= query string tracks which section of that profile is active — two different kinds of URL data working together on the same page.

Common Mistakes

Best Practices

Frequently Asked Questions

Key Takeaways

Summary

Dynamic route segments and query strings let a single page component serve an unlimited number of URLs — one user profile page can display any user simply by reading their ID out of the URL with useParams, while useSearchParams handles optional extras like the active tab or sort order.

In this lesson, you defined a dynamic route with :id, read it with useParams, read query strings with useSearchParams, and built a complete user-profile page that combines both. Next, you will learn about nested routes, which let a page render its own set of sub-routes inside a shared layout.