Dynamic Routing in React Router Explained
Learn Dynamic Routing in React Router with practical examples. Understand route parameters, useParams, dynamic URLs, blog slugs, product pages, and React routing best practices.
Dynamic Routing in React Router: Creating Routes with URL Parameters
In real-world applications, not every page has a fixed URL.
For example, consider a blog website.
Each blog post has a unique URL:
/blog/react-hooks
/blog/javascript-arrays
/blog/useeffect-guide
Or an e-commerce website:
/product/101
/product/102
/product/103
Creating a separate route for every product or blog post would be impossible.
This is where Dynamic Routing becomes useful.
Dynamic Routing allows React applications to generate pages based on dynamic URL values.
In this guide, you'll learn what Dynamic Routing is, how it works, and how to create dynamic routes using React Router.
Prerequisites
Before learning Dynamic Routing, make sure you understand:
These concepts will help you understand route parameters more effectively.
What is Dynamic Routing?
Dynamic Routing allows a route to accept variable values inside the URL.
Instead of creating multiple routes:
/product/1
/product/2
/product/3
You can create a single route:
/product/:id
The :id part is called a Route Parameter .
React Router automatically captures this value from the URL.
Why Do We Need Dynamic Routing?
Imagine an e-commerce website with:
10,000 Products
Creating routes manually:
<Route path="/product/1" />
<Route path="/product/2" />
<Route path="/product/3" />
would be impossible.
Instead:
<Route
path="/product/:id"
/>
A single route handles all products.
This makes applications:
- scalable
- maintainable
- flexible
Understanding Route Parameters
A dynamic route uses:
:id
Example:
<Route
path="/product/:id"
element={<Product />}
/>
Possible URLs:
/product/101
/product/102
/product/500
The route matches all of them.
Creating a Dynamic Route
Example:
import {
Routes,
Route
} from "react-router-dom";
import Product from "./Product";
function App() {
return (
<Routes>
<Route
path="/product/:id"
element={<Product />}
/>
</Routes>
);
}
Now React Router can handle any product ID.
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>
);
}
If the user visits:
/product/101
Output:
Product ID: 101
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 basic dynamic route setup.
Dynamic Blog Routing Example
Blog URLs:
/blog/react-hooks
/blog/useeffect-guide
/blog/javascript-arrays
Route:
<Route
path="/blog/:slug"
element={<BlogPost />}
/>
Component:
const { slug } =
useParams();
Output:
react-hooks
or
javascript-arrays
This pattern is commonly used in blogging platforms.
Dynamic User Profile Example
Route:
<Route
path="/user/:username"
element={<Profile />}
/>
URLs:
/user/sachin
/user/john
/user/alex
Component:
const { username } =
useParams();
Output changes automatically based on the URL.
Fetching Data Using Route Parameters
A common pattern is:
Get Parameter
↓
Call API
↓
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 (
<div>
{product?.name}
</div>
);
}
This is a very common production pattern.
Multiple Route 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
React Router supports multiple parameters.
Behind the Scenes
When a user visits:
/product/101
React Router:
Matches Route
↓
Extracts ID
↓
Passes Parameter
↓
Component Renders
The parameter becomes available through useParams() .
Real Project Usage
Blog Platforms
Dynamic routes:
/blog/:slug
Used for:
- tutorials
- articles
- documentation
E-commerce Websites
Dynamic routes:
/product/:id
Used for:
- product pages
- product details
- inventory systems
User Dashboards
Dynamic routes:
/user/:username
Used for:
- profiles
- settings
- public pages
Common Real-World Use Cases
Dynamic Routing is commonly used for:
- blog posts
- products
- categories
- user profiles
- course pages
- documentation pages
- portfolios
Most large applications rely heavily on dynamic routes.
Dynamic Routing vs Static Routing
Static Routing
Example:
/about
/contact
/services
Fixed URLs.
Dynamic Routing
Example:
/product/:id
/blog/:slug
/user/:username
Variable URLs.
Dynamic routing is more flexible and scalable.
When NOT to Use Dynamic Routing
Avoid dynamic routes for pages that never change.
Example:
/about
/contact
/privacy-policy
These are better as static routes.
Common Beginner Mistakes
Forgetting useParams
Incorrect:
function Product() {
return (
<h1>Product</h1>
);
}
Without useParams , you cannot access route values.
Parameter Name Mismatch
Route:
/product/:id
Incorrect:
const { productId } =
useParams();
Correct:
const { id } =
useParams();
Names must match exactly.
Not Handling Missing Data
Always prepare for invalid URLs.
Example:
/product/999999
The product may not exist.
Dynamic Routing Interview Questions
- What is Dynamic Routing?
- What is a Route Parameter?
- What does useParams do?
- Why is Dynamic Routing useful?
- How do you create dynamic routes in React Router?
- Can a route have multiple parameters?
- What is the difference between Static and Dynamic Routing?
Watch Full Dynamic Routing Tutorial
If you prefer video learning, watch the complete tutorial below where we build dynamic blog pages, product pages, and URL parameter-based routing.
Watch the Full Dynamic Routing Tutorial
This tutorial demonstrates real-world dynamic routing patterns used in React applications.
Build Something
Practice Dynamic Routing by creating:
- Blog Website
- Product Catalog
- User Profile System
- Course Platform
- Documentation Website
These projects will help you understand route parameter handling in real applications.
Production Tip
Professional React developers usually:
- use slugs instead of numeric IDs for SEO
- validate route parameters
- show loading states while fetching data
- handle invalid URLs gracefully
- separate route logic from UI components
Well-structured dynamic routes improve scalability and user experience.
Why Dynamic Routing Matters
Dynamic Routing allows developers to create scalable applications without defining thousands of individual routes.
Instead of manually creating pages for every product, article, or user, a single route can generate content dynamically based on URL parameters.
This is one of the most powerful features of React Router.
Conclusion
Dynamic Routing allows React applications to handle variable URLs using route parameters.
By combining dynamic routes with useParams() , developers can build blogs, e-commerce platforms, user dashboards, and many other scalable applications.
Mastering Dynamic Routing is an essential step toward building professional React applications with React Router.