React Router – URL Parameters

Introduction

URL Parameters allow you to pass dynamic values through the URL and use them inside React components. They are commonly used when displaying details pages such as user profiles, product details, blog posts, or course pages.

Instead of creating separate routes for every item, URL parameters help build dynamic and scalable routing in React applications.

What Are URL Parameters?

URL parameters are dynamic segments of a URL that change based on user interaction or data.

Example URL:

/users/101

Here:

• 101 is a URL parameter
• It represents a dynamic value such as user ID

React Router provides the useParams hook to access these values.

Why Use URL Parameters?

URL parameters help:

• Display dynamic data
• Reduce repetitive route definitions
• Build detail pages efficiently
• Improve SEO with meaningful URLs
• Create scalable routing structures

Basic Syntax of URL Parameters

URL parameters are defined using a colon (:) before the parameter name.

<Route path="/users/:id" element={<UserDetails />} />

In this example:

• :id is a dynamic parameter
• Any value after /users/ will be captured

Accessing URL Parameters Using useParams

React Router provides the useParams hook to read URL parameters inside a component.

Example: User Details Page

Step 1: Define the Route

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

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

export default App;

Step 2: Read URL Parameter in Component

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

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

  return (
    <div>
      <h2>User Details</h2>
      <p>User ID: {id}</p>
    </div>
  );
}

export default UserDetails;

Explanation:

• useParams returns an object
• The key matches the parameter name
• Values are always strings

Navigating with URL Parameters

URL parameters are often used with Link or NavLink.

Example

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

function UsersList() {
  return (
    <div>
      <Link to="/users/1">User 1</Link>
      <Link to="/users/2">User 2</Link>
    </div>
  );
}

export default UsersList;

Clicking a link dynamically loads the user details.

Multiple URL Parameters

You can define more than one parameter in a route.

Example

<Route path="/courses/:category/:id" element={<CourseDetails />} />

Accessing parameters:

const { category, id } = useParams();

Example URL:

/courses/react/101

URL Parameters with Nested Routes

URL parameters work seamlessly with nested routes.

Example:

/dashboard/users/10

React Router correctly passes parameters to child components.

Common Mistakes with URL Parameters

• Forgetting to use : in route definition
• Misspelling parameter names
• Expecting numbers instead of strings
• Not handling invalid parameter values
• Using URL parameters when query parameters are more suitable

URL Parameters vs Query Parameters

Interview Questions and Answers – URL Parameters

1. What are URL parameters in React Router?

They are dynamic values passed through the URL to render data-driven components.

2. How do you define URL parameters?

By using a colon before the parameter name in the route path.

3. Which hook is used to access URL parameters?

The useParams hook.

4. What type of value does useParams return?

All values are returned as strings.

5. Can a route have multiple URL parameters?

Yes, multiple parameters can be defined.

6. Are URL parameters SEO-friendly?

Yes, they create clean and meaningful URLs.

7. Can URL parameters be optional?

Not directly. Optional behavior can be handled using conditional logic.

8. Do URL parameters cause page reloads?

No, they follow client-side routing.

9. Can URL parameters be used with nested routes?

Yes, they work perfectly with nested routing.

10. When should URL parameters be avoided?

When the data is optional or filtering-based, query parameters are better.