useParams returns an object containing the dynamic URL parameters matched by the current route, like an item's id from a path pattern such as '/products/:id'.

Syntax

const { paramName } = useParams();

Deep Dive Course

When a route's path pattern includes a dynamic segment, written with a leading colon like '/products/:productId', useParams() lets the component rendered for that route read the actual value that was matched in the current URL — visiting '/products/42' with that route pattern makes useParams() return { productId: '42' }. Every matched parameter comes through as a string, even if it looks numeric, so an id used for something like an array lookup or an API call expecting a number typically needs an explicit conversion first.

1Understanding useParams

💡

Every value returned by useParams() is always a string, even a numeric-looking one like an id — convert it explicitly with Number() or parseInt() before using it anywhere that expects an actual number, like an array index.

editor.html

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

function ProductPage() {
  const { productId } = useParams();
  return <p>Showing product: {productId}</p>;
}

// Route path="/products/:productId", visiting /products/42

localhost:3000

2Practical Example

Here is a real-world application of useParams showing how it is used in production React code.

editor.html

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

function UserPost() {
  const { userId, postId } = useParams();
  return <p>User {userId}, Post {postId}</p>;
}

// Route path="/users/:userId/posts/:postId", visiting /users/7/posts/123

localhost:3000

3Best Practices

Follow these guidelines when working with useParams:

1. Convert route parameters from useParams() to the expected type, like Number(id), before using them for numeric comparisons, array indexing, or type-sensitive API calls

2. Name a route's dynamic segment clearly, like ':productId' rather than a generic ':id', especially when a route has more than one dynamic parameter

3. Handle the case where a matched parameter doesn't correspond to any real underlying data, like a productId that doesn't exist, rather than assuming useParams() always returns a valid, existing identifier

⚠️

Tip: Every value returned by useParams() is always a string, even a numeric-looking one like an id — convert it explicitly with Number() or parseInt() before using it anywhere that expects an actual number, like an array index.

editor.html

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

function ProductPage() {
  const { productId } = useParams();
  return <p>Showing product: {productId}</p>;
}

// Route path="/products/:productId", visiting /products/42

localhost:3000

Examples

Example 01Basic Usage

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

function ProductPage() {
  const { productId } = useParams();
  return <p>Showing product: {productId}</p>;
}

// Route path="/products/:productId", visiting /products/42

Example 02Advanced Example

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

function UserPost() {
  const { userId, postId } = useParams();
  return <p>User {userId}, Post {postId}</p>;
}

// Route path="/users/:userId/posts/:postId", visiting /users/7/posts/123

Best Practices

Convert route parameters from useParams() to the expected type, like Number(id), before using them for numeric comparisons, array indexing, or type-sensitive API calls
Name a route's dynamic segment clearly, like ':productId' rather than a generic ':id', especially when a route has more than one dynamic parameter
Handle the case where a matched parameter doesn't correspond to any real underlying data, like a productId that doesn't exist, rather than assuming useParams() always returns a valid, existing identifier

Interview Question

Why does useParams() always return route parameters as strings, even for a segment like an id that's semantically a number?▼

Hint: Think about what a URL actually is, at the most fundamental level, before any application-specific meaning is applied to its segments.

A URL, and every segment within its path, is fundamentally just text — the browser and the routing library have no inherent way to know that a particular dynamic segment is supposed to represent a number, a UUID, or any other specific data type, since a URL path is just a string with no attached type information at all. React Router's job is simply to match the URL's actual text against a route's pattern and extract whatever text appeared at each dynamic segment's position, which is why useParams() always hands back plain strings regardless of what they might semantically represent in your application's data model. It's specifically the responsibility of the component using that parameter to interpret and convert it appropriately for its own purposes, like calling Number() on an id before using it to look up a record by a numeric key, since only the application code actually knows what type that particular parameter is meant to represent.

Exercises

MediumPractice using useParams in a real scenario.

View Solution

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

function ProductPage() {
  const { productId } = useParams();
  return <p>Showing product: {productId}</p>;
}

// Route path="/products/:productId", visiting /products/42

Frequently Asked Questions

Why does useParams() always return route parameters as strings, even for a segment like an id that's semantically a number?▼

Related Functions

routeusenavigateuselocation