Route Parameters in React Router Explained

Learn Route Parameters in React Router with practical examples. Understand useParams, dynamic URLs, route parameters, product pages, blog slugs, and React Router best practices.

Route Parameters in React Router: Access Dynamic URL Data Using useParams

Modern web applications often display different content based on the URL.

For example:

  /product/101

/product/202

/product/303
  

Or:

  /blog/react-hooks

/blog/react-router

/blog/javascript-arrays
  

Even though the page component is the same, the content changes based on the value inside the URL.

This is possible because of Route Parameters .

Route Parameters allow React applications to extract dynamic values from URLs and use them inside components.

In this guide, you'll learn what Route Parameters are, how they work, and how developers use them in real-world React applications.

Prerequisites

Before learning Route Parameters, make sure you understand:

• React Router Explained
• Static Routing in React Router
• Dynamic Routing in React Router
• React useNavigate Hook

These concepts provide the foundation for understanding URL-based routing.

What Are Route Parameters?

Route Parameters are dynamic values inside a route path.

Example:

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

Here:

  :id
  

is a Route Parameter.

React Router automatically captures its value from the URL.

Why Do We Need Route Parameters?

Imagine an e-commerce website with:

  10,000 Products
  

Creating individual routes:

  <Route path="/product/1" />
<Route path="/product/2" />
<Route path="/product/3" />
  

would be impossible.

Instead:

  <Route
  path="/product/:id"
/>
  

One route handles every product page.

This makes applications:

• scalable
• maintainable
• flexible

Understanding Route Parameters

Example route:

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

Possible URLs:

  /product/101

/product/202

/product/303
  

The route matches all URLs automatically.

Accessing Route Parameters

React Router provides:

  useParams()
  

Import:

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

Usage:

  function Product() {

  const { id } =
    useParams();

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

URL:

  /product/101
  

Output:

  Product ID: 101
  

How useParams Works

When users visit:

  /product/500
  

React Router:

  Matches Route

↓

Extracts Parameter

↓

Provides Value

↓

Component Uses Data
  

The parameter becomes available through useParams() .

Complete Example

Route Configuration

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

Product Component

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

function Product() {

  const { id } =
    useParams();

  return (

    <div>

      <h1>
        Product Details
      </h1>

      <p>
        Product ID: {id}
      </p>

    </div>

  );
}

export default Product;
  

This is the most common route parameter pattern.

Blog Example

Blog routes often use slugs.

Route:

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

URLs:

  /blog/react-hooks

/blog/react-router

/blog/useeffect-guide
  

Component:

  const { slug } =
  useParams();
  

Output:

  react-hooks
  

This pattern is commonly used in blogging platforms.

User Profile Example

Route:

  <Route
  path="/user/:username"
  element={<Profile />}
/>
  

URLs:

  /user/sachin

/user/john

/user/alex
  

Access:

  const { username } =
  useParams();
  

React automatically provides the username.

Multiple Route Parameters

React Router supports multiple parameters.

Example:

  <Route
  path="/category/:categoryId/product/:productId"
  element={<Product />}
 />
  

URL:

  /category/5/product/101
  

Access:

  const {
  categoryId,
  productId
} = useParams();
  

Output:

  categoryId = 5

productId = 101
  

This pattern is common in large applications.

Fetching Data Using Route Parameters

A common workflow:

  Read Parameter

↓

Call API

↓

Receive Data

↓

Display Data
  

Example:

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

import {
  useEffect,
  useState
} from "react";

function Product() {

  const { id } =
    useParams();

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

  useEffect(() => {

    fetch(
      `/api/products/${id}`
    )
      .then(res =>
        res.json()
      )
      .then(data =>
        setProduct(data)
      );

  }, [id]);

  return (
    <h2>
      {product?.name}
    </h2>
  );
}
  

This is one of the most common production use cases.

Real Project Usage

E-commerce Applications

Routes:

  /product/:id
  

Used for:

• product pages
• inventory systems
• product details

Blogging Platforms

Routes:

  /blog/:slug
  

Used for:

• tutorials
• articles
• documentation

User Profiles

Routes:

  /user/:username
  

Used for:

• public profiles
• dashboards
• account pages

Common Real-World Use Cases

Route Parameters are commonly used for:

• products
• blog posts
• user profiles
• categories
• courses
• documentation
• admin dashboards

Most modern applications use route parameters extensively.

Route Parameters vs Query Parameters

Route Parameters

Example:

  /product/101
  

Accessed using:

  useParams()
  

Query Parameters

Example:

  /products?page=2
  

Accessed using:

  useSearchParams()
  

Both serve different purposes.

Common Beginner Mistakes

Forgetting useParams

Incorrect:

  function Product() {

  return (
    <h1>
      Product
    </h1>
  );
}
  

The parameter cannot be accessed.

Parameter Name Mismatch

Route:

  /product/:id
  

Incorrect:

  const { productId } =
  useParams();
  

Correct:

  const { id } =
  useParams();
  

Names must match exactly.

Not Handling Invalid Data

Example:

  /product/999999
  

The product may not exist.

Always handle errors gracefully.

Forgetting Dependency Arrays

When fetching data:

  useEffect(() => {

}, [id]);
  

Always include route parameters as dependencies when needed.

Route Parameters Interview Questions

1. What are Route Parameters?
2. What does useParams do?
3. How do you create a dynamic route?
4. Can a route have multiple parameters?
5. What is the difference between Route Parameters and Query Parameters?
6. How do you access URL values in React Router?
7. Why are Route Parameters useful?

Build Something

Practice Route Parameters by creating:

• Blog Platform
• Product Catalog
• User Profile System
• Documentation Website
• Course Platform

These projects will help you understand dynamic routing in real-world applications.

Production Tip

Professional React developers usually:

• use SEO-friendly slugs
• validate route parameters
• handle invalid URLs
• show loading states
• fetch data using parameter values

Well-implemented route parameters improve scalability and user experience.

Why Route Parameters Matter

Route Parameters allow applications to display dynamic content using a single route definition.

Without them, developers would need thousands of individual routes for products, blog posts, users, and other dynamic resources.

They are one of the most powerful features of React Router.

Conclusion

Route Parameters allow React applications to capture dynamic values directly from URLs.

Using useParams() , developers can access these values and build dynamic pages such as blog posts, product pages, and user profiles.

Mastering Route Parameters is an essential step toward building scalable and professional React applications with React Router.