URL Parameters
In this page:
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
// 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
// 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
// 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.
- Forgetting the colon in the route definition (path='/users/:id' not '/users/id').
- Not converting the param string to a number when comparing it against numeric IDs, since useParams always returns strings.
- Assuming a param is always present — a route might render before navigation fully resolves it.
- A route path segment prefixed with a colon (like :id) becomes a dynamic parameter.
- useParams() returns an object of all matched parameters as strings, keyed by their names.
- Params let one Route definition serve many different URLs (e.g. every /users/:id).
- Always parse/convert param strings if you need to compare them against numbers.
Requires npm install react-router-dom — not available via CDN in this sandbox.
Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: