What does useParams() do?

ReactJunior~2 min read

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

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 , 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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.