React js Dynamic Routing Practice Questions with Solutions

By /

Introduction

Dynamic Routing in React Router allows you to create routes where part of the URL changes based on data. For example, a product page can use URLs like /products/101 and /products/102 instead of creating a separate route for every product. Dynamic routes are useful for product details, user profiles, blog posts, and other data-driven pages. In this chapter, we will solve practical Dynamic Routing questions using React Router. React js Dynamic Routing practice questions with solutions help to understand the concepts.

1. What is Dynamic Routing in React Router?

Dynamic Routing means creating a route where a part of the URL can change dynamically.

For example:

/products/101
/products/102
/products/103

Instead of creating three separate routes, we can create one dynamic route:

<Route path="/products/:productId" element={<ProductDetails />} />

Here, :productId is a dynamic route parameter.

2. How do you create a Dynamic Route in React Router?

You can create a dynamic route by adding : before the parameter name.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/products/:productId"
          element={<ProductDetails />}
        />
      </Routes>
    </BrowserRouter>
  );
}

function ProductDetails() {
  return <h1>Product Details</h1>;
}

export default App;

Now URLs such as these can match the same route:

/products/101
/products/102
/products/500

3. What is a Route Parameter in React Router?

A Route Parameter is the dynamic part of a URL.

For example:

<Route path="/users/:userId" element={<User />} />

Here:

:userId

is the route parameter.

If the URL is:

/users/25

then the value of userId is:

25

Route parameters are useful when the page depends on a specific item.

4. How do you access a Dynamic Route Parameter using useParams()?

React Router provides the useParams() Hook to read dynamic route parameters.

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

function ProductDetails() {
  const { productId } = useParams();

  return <h1>Product ID: {productId}</h1>;
}

For this URL:

/products/101

The output will be:

Product ID: 101

useParams() returns the parameters from the current URL.

5. How do you create Dynamic User Profile Routes?

You can create a dynamic route for user profiles.

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/users/:userId" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

function UserProfile() {
  return <h1>User Profile</h1>;
}

export default App;

Now different users can have different URLs:

/users/101
/users/102
/users/103

All of them use the same UserProfile component.

6. How do you create Dynamic Product Links?

You can generate links dynamically using the product ID.

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

function Products() {
  const products = [
    { id: 101, name: "Laptop" },
    { id: 102, name: "Mobile" },
    { id: 103, name: "Headphones" }
  ];

  return (
    <div>
      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>

          <Link to={`/products/${product.id}`}>
            View Product
          </Link>
        </div>
      ))}
    </div>
  );
}

export default Products;

This generates links such as:

/products/101
/products/102
/products/103

The same product-details route can handle all of them.

7. How do you use Dynamic Routing with Product Data?

You can use the route parameter to find a specific product.

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

function ProductDetails() {
  const { productId } = useParams();

  const products = [
    { id: "101", name: "Laptop", price: 50000 },
    { id: "102", name: "Mobile", price: 25000 },
    { id: "103", name: "Headphones", price: 3000 }
  ];

  const product = products.find(
    (item) => item.id === productId
  );

  if (!product) {
    return <h2>Product Not Found</h2>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Price: ₹{product.price}</p>
    </div>
  );
}

export default ProductDetails;

The route:

<Route
  path="/products/:productId"
  element={<ProductDetails />}
/>

allows the component to identify which product should be displayed.

8. Can a React Router Route have Multiple Dynamic Parameters?

Yes. A route can contain multiple dynamic parameters.

For example:

<Route
  path="/users/:userId/posts/:postId"
  element={<PostDetails />}
/>

For this URL:

/users/10/posts/25

you can access both parameters:

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

function PostDetails() {
  const { userId, postId } = useParams();

  return (
    <div>
      <h1>User ID: {userId}</h1>
      <h2>Post ID: {postId}</h2>
    </div>
  );
}

Output:

User ID: 10
Post ID: 25

This is useful for nested data such as user posts, category products, or course lessons.

9. How do you create a Dynamic Blog Post Route?

Dynamic Routing is commonly used for blog websites.

For example:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/blog/:slug" element={<BlogPost />} />
      </Routes>
    </BrowserRouter>
  );
}

function BlogPost() {
  return <h1>Blog Post</h1>;
}

export default App;

A blog can then have URLs such as:

/blog/react-hooks
/blog/javascript-basics
/blog/react-routing

Inside the component, the slug can be accessed using:

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

function BlogPost() {
  const { slug } = useParams();

  return <h1>Post: {slug}</h1>;
}

The slug can then be used to find or fetch the corresponding blog data.

10. How do you Build a Practical Dynamic Product Details Application?

Let’s create a simple product application using Dynamic Routing.

import {
  BrowserRouter,
  Routes,
  Route,
  Link,
  useParams
} from "react-router-dom";

const products = [
  { id: "1", name: "Laptop", price: 55000 },
  { id: "2", name: "Smartphone", price: 30000 },
  { id: "3", name: "Keyboard", price: 2000 }
];

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<ProductList />} />
        <Route
          path="/products/:productId"
          element={<ProductDetails />}
        />
      </Routes>
    </BrowserRouter>
  );
}

function ProductList() {
  return (
    <div>
      <h1>Products</h1>

      {products.map((product) => (
        <div key={product.id}>
          <h3>{product.name}</h3>

          <Link to={`/products/${product.id}`}>
            View Details
          </Link>
        </div>
      ))}
    </div>
  );
}

function ProductDetails() {
  const { productId } = useParams();

  const product = products.find(
    (item) => item.id === productId
  );

  if (!product) {
    return <h2>Product Not Found</h2>;
  }

  return (
    <div>
      <h1>{product.name}</h1>
      <p>Product ID: {product.id}</p>
      <p>Price: ₹{product.price}</p>

      <Link to="/">Back to Products</Link>
    </div>
  );
}

export default App;

How this application works

The main route is:

/

It displays the product list.

The dynamic route is:

/products/:productId

When the user clicks View Details, React Router creates a URL such as:

/products/1

The ProductDetails component reads 1 using:

const { productId } = useParams();

It then searches the product array and displays the matching product.

This same route can handle:

/products/1
/products/2
/products/3

without creating separate routes for each product.

Key Takeaways

  • Dynamic Routing allows URL values to change based on data.
  • A dynamic parameter is created using : in the route path.
  • :productId and :userId are examples of route parameters.
  • useParams() is used to read dynamic route parameters.
  • Dynamic routes are useful for products, users, blogs, courses, and other data-driven pages.
  • Link can be used to create dynamic URLs.
  • A route can contain multiple dynamic parameters.
  • Always handle cases where the requested data does not exist.
  • Dynamic Routing works well with API-based applications.
  • The next step is to learn how to work with URL parameters and query parameters in more detail.

FAQs

1. What is Dynamic Routing in React?

Dynamic Routing allows React Router to create routes containing values that can change, such as product IDs, user IDs, or blog slugs.

2. What is :id in React Router?

:id represents a dynamic route parameter.

For example:

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

Here, id can have different values depending on the URL.

3. Which Hook is used to access route parameters?

The useParams() Hook is used to access dynamic route parameters.

const { id } = useParams();

4. Can Dynamic Routes be used for product pages?

Yes. Dynamic Routes are commonly used for product detail pages.

Example:

/products/101
/products/102
/products/103

5. Can a Dynamic Route have more than one parameter?

Yes.

<Route
  path="/users/:userId/posts/:postId"
  element={<Post />}
/>

Both userId and postId can be accessed with useParams().

6. What happens if a Dynamic Route parameter does not match any data?

The application should handle the situation and display an appropriate message such as:

Product Not Found

You can also create a dedicated not-found UI or route.

7. What is the difference between Dynamic Routing and Query Parameters?

Dynamic Routing puts values directly into the route path.

Example:

/products/101

Here, 101 is a route parameter.

A query parameter appears after ?.

Example:

/products?category=electronics

Query parameters are commonly used for filtering, searching, sorting, and other optional URL state. URL parameters and query parameters are covered in more detail in the next chapter.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top