Mastering useParams in React Router: Dynamic Routing, URL Parameters

Modern web applications are no longer static websites with a few pages. Today’s React applications are dynamic, intelligent, and deeply connected to routing systems that change content instantly based on the URL.

Think about applications like:

• E-commerce platforms displaying thousands of products
• Blogging websites loading unique articles dynamically
• Social media platforms opening different user profiles
• Dashboard systems handling personalized data routes

All of these applications rely heavily on one core concept:

Dynamic Routing

And one of the most important tools React provides for handling dynamic routes is useParams.

Without useParams, applications would struggle to understand:

• which product the user clicked
• which blog post should open
• which profile should load
• which data belongs to which route

This hook acts as the connection between the URL and your component logic, allowing React applications to build scalable and reusable page systems with ease.

In this 10th episode of the “Let’s Master React Hooks Together” series, we’ll deeply explore everything about useParams, including:

• what it is
• why it exists
• the problems it solves
• where and when to use it
• how it works internally
• real-world practical examples
• common mistakes
• best practices used in production applications

By the end of this guide, you’ll have a complete understanding of how dynamic routing works in React and why useParams is one of the most essential hooks in modern React development.

---

What is useParams?

useParams is a hook provided by React Router that allows you to access dynamic values from the URL.

It helps React extract route parameters directly from the current route.

For example:

/product/15

Here:

• product → static route
• 15 → dynamic value

Using useParams, we can read that 15 inside the component.

---

Definition of useParams

useParams is a React Router hook used to retrieve dynamic route parameters from the URL inside a component.

It returns an object containing key-value pairs of the URL parameters.

---

Why Do We Need useParams?

Imagine an e-commerce application.

You have 100 products.

Creating separate routes like this would be impossible:

/product1
/product2
/product3
/product4

Instead, React Router allows dynamic routes:

/product/:id

Now:

• /product/1
• /product/2
• /product/99

all use the same component.

The component simply reads the id using useParams.

This makes applications:

• scalable
• reusable
• dynamic
• easier to maintain

---

Which Problem Does useParams Solve?

Without useParams, your component would not know:

• which user is being viewed
• which product was clicked
• which blog post should load
• which order details to fetch

useParams solves the problem of:

Passing dynamic data through the URL.

It acts as a bridge between:

• the URL
• and the component logic

---

Where is useParams Used?

useParams is commonly used in:

Application Type	Example
E-commerce	/product/45
Blogging Platforms	/blog/react-hooks
Social Media Apps	/profile/john
Learning Platforms	/course/react
Admin Dashboards	/user/101/edit

---

When Should You Use useParams?

Use useParams when:

• data changes based on URL
• pages are dynamic
• IDs are required from route
• fetching specific data
• creating reusable pages

---

Installing React Router

Before using useParams, install React Router.

npm install react-router-dom

---

Basic Setup of React Router

Step 1: Wrap Application

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

import {
  BrowserRouter
} from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

---

Creating Dynamic Routes

Step 2: Define Routes

import { Routes, Route } from "react-router-dom";
import Product from "./Product";

function App() {
  return (
    <Routes>
      <Route path="/product/:id" element={<Product />} />
    </Routes>
  );
}

export default App;

---

Understanding :id

/product/:id

The colon : means:

This is a dynamic parameter.

Here:

• id becomes the parameter name
• React Router captures its value

Example:

/product/25

Then:

id = 25

---

Using useParams

Now let’s access the parameter.

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

function Product() {
  const params = useParams();

  return (
    <div>
      <h1>Product ID: {params.id}</h1>
    </div>
  );
}

export default Product;

---

Output

If URL is:

/product/99

Output:

Product ID: 99

---

Destructuring useParams

Most developers use destructuring.

const { id } = useParams();

Complete example:

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

function Product() {
  const { id } = useParams();

  return (
    <div>
      <h1>Product ID: {id}</h1>
    </div>
  );
}

export default Product;

---

How useParams Works Internally

When React Router matches a route:

/product/:id

and the current URL is:

/product/10

React Router creates:

{
  id: "10"
}

Then useParams() returns that object.

---

Important Point

All route parameters are returned as strings.

Even if:

/product/10

10 is still:

"10"

not a number.

---

Converting Parameter to Number

const { id } = useParams();

const productId = Number(id);

---

Multiple Route Parameters

You can use multiple dynamic parameters.

<Route path="/user/:userId/post/:postId" element={<Post />} />

URL:

/user/12/post/55

Using:

const { userId, postId } = useParams();

Result:

userId = "12"
postId = "55"

---

Real World Example — Fetching API Data

One of the most common use cases.

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

function Product() {
  const { id } = useParams();

  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch(`https://fakestoreapi.com/products/${id}`)
      .then(res => res.json())
      .then(data => setProduct(data));
  }, [id]);

  return (
    <div>
      {product && (
        <>
          <h1>{product.title}</h1>
          <p>{product.price}</p>
        </>
      )}
    </div>
  );
}

export default Product;

---

Why [id] is Added in Dependency Array

useEffect(() => {
  // fetch logic
}, [id]);

Because when URL changes:

/product/1

to

/product/2

the component must refetch data.

---

Dynamic Blog Example

Route:

<Route path="/blog/:slug" element={<Blog />} />

URL:

/blog/react-hooks-guide

Usage:

const { slug } = useParams();

Output:

slug = "react-hooks-guide"

---

Common Mistakes with useParams

1. Forgetting Colon :

Wrong:

<Route path="/product/id" element={<Product />} />

Correct:

<Route path="/product/:id" element={<Product />} />

---

2. Using Outside Router

Wrong:

useParams();

without:

<BrowserRouter>

This causes errors.

---

3. Expecting Number Instead of String

Wrong:

if(id === 5)

Correct:

if(Number(id) === 5)

---

4. Typo in Parameter Name

Route:

/product/:id

Wrong:

const { productId } = useParams();

Correct:

const { id } = useParams();

---

useParams vs Props

Before hooks, route parameters were often passed through props.

Hooks made it cleaner.

Instead of:

props.match.params.id

Now:

const { id } = useParams();

Much simpler and readable.

---

Combining useParams with Other Hooks

useParams works beautifully with:

• useEffect
• useState
• useNavigate
• useContext

Example:

const { id } = useParams();

useEffect(() => {
  fetchUser(id);
}, [id]);

---

Nested Routes with useParams

<Route path="/dashboard/user/:id" element={<User />} />

URL:

/dashboard/user/88

Usage:

const { id } = useParams();

---

Optional Parameters

Some applications use optional route segments.

Example pattern:

/profile/:username

or:

/profile/john

---

Best Practices

Keep Parameter Names Meaningful

Good:

:userId
:productId
:postId

Bad:

:x
:data
:value

---

Validate Parameters

Never trust URL values blindly.

if (isNaN(id)) {
  return <h1>Invalid Product ID</h1>;
}

---

Use Clean URL Structures

Good:

/product/15

Better readability and SEO.

---

Use Slugs for Blogs

Instead of:

/blog/15

Prefer:

/blog/react-router-guide

---

Complete Practical Example

App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Product from "./Product";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/product/:id" element={<Product />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

---

Product.jsx

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

function Product() {
  const { id } = useParams();

  return (
    <div>
      <h1>Viewing Product {id}</h1>
    </div>
  );
}

export default Product;

---

URL Testing

Visit:

/product/1

Then:

/product/25

Then:

/product/999

Notice how the same component dynamically changes.

That’s the real power of useParams.

---

Advantages of useParams

Advantage	Description
Dynamic Routing	Creates reusable pages
Cleaner Code	Easy parameter access
Better Scalability	One component handles many pages
Flexible URLs	Supports IDs and slugs
Easier API Calls	Fetch data directly from route

---

Limitations of useParams

Limitation	Explanation
Returns Strings Only	Needs conversion
Requires React Router	Cannot work standalone
Depends on Route Matching	Wrong route means undefined

---

Final Thoughts

useParams is one of the most important hooks when working with React Router.

It allows components to become dynamic by reading values directly from the URL.

Without it, building scalable applications like:

• e-commerce platforms
• blogging websites
• dashboards
• social media apps

would become extremely difficult.

Once you understand useParams, you unlock the ability to build fully dynamic page systems in React.

And in real-world projects, this hook is used almost everywhere dynamic routing exists.

---

Conclusion

This was the 10th episode of the “Let’s Master React Hooks Together” series, and in this episode, we took a deep dive into one of the most practical and widely used hooks in React Router — useParams.

We explored:

• what useParams is
• why it exists
• the routing problems it solves
• how dynamic URLs work
• how React extracts route parameters
• real-world implementation patterns
• API integration examples
• common mistakes developers make
• professional best practices

Understanding useParams is more than just learning another hook.

It’s about understanding how modern React applications create dynamic experiences where a single component can intelligently display completely different content based on the current route.

This concept powers:

• product pages
• blog systems
• user profiles
• admin dashboards
• course platforms
• and countless real-world applications used every day.

Mastering useParams gives you the ability to build scalable routing architectures and dynamic page systems like professional production-level React applications.

And this is only the beginning.

As we continue forward in the “Let’s Master React Hooks Together” series, we’ll keep exploring more powerful hooks, advanced React patterns, and real-world development concepts that help transform React knowledge into real application-building skills.

See you in Episode 11.