Suggest an edit

Improve this article

Refine the answer for “What does useParams() do?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## What useParams() does

> useParams() returns an object with the **parameters of the current route**, that is, the values substituted into the **dynamic parts of the URL**.

---

## Example: the basic idea

If you have a route:

```javascript
<Route path="/users/:id" element={<UserPage />} />
```

And the user opens the page:

```javascript
/users/42
```

Then inside UserPage you can get id like this:

```javascript
import { useParams } from "react-router-dom";

function UserPage() {
  const params = useParams();
  console.log(params); // { id: "42" }

return <h1>User profile #{params.id}</h1>;
}
```

useParams() will return an object where the keys correspond to the parameter names, and the values are whatever was substituted into the URL.

---

## General scheme

| Route path | URL in the browser | Result of useParams() |
|---|---|---|
| /users/:id | /users/123 | { id: "123" } |
| /posts/:postId/comments/:commentId | /posts/7/comments/55 | { postId: "7", commentId: "55" } |
| /product/:slug | /product/macbook-pro | { slug: "macbook-pro" } |

---

## What it's used for

| Scenario | Example |
|---|---|
| Loading data by ID | fetchUser(params.id) |
| Building nested routes | /courses/:courseId/lessons/:lessonId |
| Navigating dynamic pages | Profiles, products, articles, etc. |
| Nested layouts | for example, /dashboard/:section |

---

## A real-world usage example

```javascript
import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductPage() {
  const { id } = useParams(); // id from the URL
  const [product, setProduct] = useState(null);

useEffect(() => {
    fetch(`/api/products/${id}`)
      .then(res => res.json())
      .then(setProduct);
  }, [id]);

if (!product) return <p>Loading...</p>;

return <h1>{product.name}</h1>;
}
```

When the user opens /products/10, React Router will pass id = "10", and the component will load the corresponding product.

---

## Example with multiple parameters

```javascript
<Route path="/users/:userId/posts/:postId" element={<UserPost />} />
```

```javascript
import { useParams } from "react-router-dom";

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

The URL /users/5/posts/10 -> will render:

```javascript
User: 5, post: 10
```

---

## Important to remember

1. useParams() returns **strings**, even if they are numbers.

```javascript
  const { id } = useParams(); // "42", not 42
  ```
  If you need a number, convert it explicitly: Number(id).
2. Works **only inside** <Route>, otherwise it returns {} (an empty object).
3. Parameters come **only from the routes** where they are declared in path. For example, if the path is /about and you call useParams(), it will return {}.

---

## Example of nested routes

```javascript
<Route path="/dashboard/:section">
  <Route path="settings" element={<Settings />} />
</Route>
```

```javascript
function Settings() {
  const { section } = useParams(); // section = "dashboard"
  ...
}
```

Parameters can be "inherited" from parent routes.

---

## Difference from other hooks

| Hook | What it does |
|---|---|
| useParams() | Gets parameters from the path (:id) |
| useSearchParams() | Gets parameters from the query string (?page=2) |
| useLocation() | Gives access to the entire URL object (pathname, search, hash, state) |

---

## Summary:

> useParams() is a React Router hook that returns an object with parameters from the dynamic part of the URL (:id, :slug, etc.).

### It's needed for:

- working with dynamic routes;
- loading data by ID from the URL;
- displaying the right content for a specific user, product, or article.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts558 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.