URL Parameters

URL parameters are like fill-in-the-blank spots in an address, letting one route show different content depending on what's plugged in, like /users/5 vs /users/9.

In this page:

Defining a Dynamic Route Segment
Reading the Parameter with useParams
Using Params to Fetch the Right Data

Syntax

markup

<Route path="/items/:id" element={<ItemDetail />} />

function ItemDetail() {
  const { id } = useParams();
  return <p>{id}</p>;
}

Defining a Dynamic Route Segment

Prefixing a path segment with a colon, like path='/users/:id', tells React Router that segment is a variable, not a literal string. Any URL matching that shape, like /users/5 or /users/42, will match this single route definition.

Note: You can have multiple dynamic segments in one path, like '/posts/:postId/comments/:commentId'.

Warning: The colon syntax only works in the path string passed to Route — you can't add it anywhere else.

Example: Defining a Dynamic Route Segment

markup

// Run in your local React project (npm install required)
import { Routes, Route } from 'react-router-dom';

function UserDetail() { return <p>Showing a user</p>; }

function AppRoutes() {
  return (
    <Routes>
      <Route path="/users/:id" element={<UserDetail />} />
    </Routes>
  );
}

⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.

Reading the Parameter with useParams

Inside the component rendered by a dynamic route, calling useParams() returns an object whose keys match the colon-prefixed names in the path. For path='/users/:id', useParams() returns something like { id: 5 } when the URL is /users/5.

Note: Destructure exactly the params you need, like const { id } = useParams(), for clarity.

Warning: useParams() always returns strings, even for numeric-looking IDs — use Number(id) or parseInt if you need to compare it numerically.

Example: Reading the Parameter with useParams

markup

// Run in your local React project (npm install required)
import { useParams } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  return <p>Showing user with ID: {id}</p>;
}

⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.

Using Params to Fetch the Right Data

The most common use of a route param is looking up the matching item from a list or an API using that ID. Since useParams() gives you the current ID directly, you can use it inside useEffect to fetch or find the corresponding data whenever it changes.

Note: Include the param in useEffect's dependency array, so navigating from /users/1 to /users/2 re-fetches the new user's data.

Warning: Forgetting the param in the dependency array means the component won't update its data when only the ID in the URL changes.

Example: Using Params to Fetch the Right Data

markup

// Run in your local React project (npm install required)
import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function UserDetail() {
  const { id } = useParams();
  const [name, setName] = useState("");
  useEffect(() => { setName("User #" + id); }, [id]);
  return <p>{name}</p>;
}

⚠️ This example uses an npm package with no CDN build available here — run this in your local React project.

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson Navigation with Link and NavLink Next Lesson → Nested Routes

URL Parameters

Defining a Dynamic Route Segment

Reading the Parameter with useParams

Using Params to Fetch the Right Data

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code