How to Use UseParams React Hook For Better Routing

Dynamic routing is a part of modern web development, we can create flexible and interactive user experience. In React the useParams hook from react-router-dom package is used to access URL parameters and render dynamic content based on the current route. This article will go into the details of useParams hook and show how to use it in dynamic routing with examples and screenshots.

Understanding Dynamic Routing in React

Dynamic routing allows components to render based on the current URL path, enabling the creation of multi-view applications without full page reloads. React Router, a standard library for routing in React applications, provides the tools necessary to implement dynamic routing seamlessly.

Defining Route Paths with Parameters

In React Router, dynamic segments in route paths are defined using the colon (:) prefix. These segments act as placeholders for variable parts of the URL, known as URL parameters. For instance:

Copy
1
<Route path="/user/:userId" component={UserProfile} />

In this example, :userId is a dynamic segment that captures the value in the URL following /user/, allowing the UserProfile component to render content specific to that userId.

Introducing the useParams Hook

The useParams hook is a function provided by react-router-dom that returns an object of key/value pairs from the current URL's dynamic parameters. It enables functional components to access these parameters directly, promoting cleaner and more readable code.

Syntax of useParams

Copy
1
2
3
import { useParams } from 'react-router-dom';

const params = useParams();

Here, params is an object containing the URL parameters defined in the route path.

Implementing useParams in Functional Components

To illustrate the practical application of the useParams hook, consider a scenario where we need to display details of a specific product based on the productId present in the URL.

Step 1: Setting Up the Route

First, define a route with a dynamic segment in your main application component:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ProductDetail from './ProductDetail';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/product/:productId" component={ProductDetail} />
      </Switch>
    </Router>
  );
}

export default App;

In this setup, the path string /product/:productId specifies that any URL matching this pattern should render the ProductDetail component.

Step 2: Accessing URL Parameters with useParams

Within the ProductDetail functional component, use the useParams hook to retrieve the productId from the URL:

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useParams } from 'react-router-dom';

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

  // Fetch product data based on productId
  // ...

  return (
    <div>
      <h1>Product ID: {productId}</h1>
      {/* Render product details */}
    </div>
  );
}

export default ProductDetail;

By destructuring the productId from the object returned by useParams, you can utilize this value to fetch and display the corresponding product data.

Handling Multiple URL Parameters

In scenarios where multiple parameters are required, define them in the route path and access them using useParams. For example:

Step 1: Defining the Route with Multiple Parameters

Copy
1
<Route path="/category/:categoryId/product/:productId" component={ProductDetail} />

Step 2: Accessing Multiple Parameters

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { useParams } from 'react-router-dom';

function ProductDetail() {
  const { categoryId, productId } = useParams();

  // Fetch data based on categoryId and productId
  // ...

  return (
    <div>
      <h1>Category ID: {categoryId}</h1>
      <h2>Product ID: {productId}</h2>
      {/* Render product details */}
    </div>
  );
}

export default ProductDetail;

In this example, both categoryId and productId are extracted from the URL, allowing for more granular data fetching and rendering.

To better understand how routes with dynamic parameters are matched, consider the following diagram illustrating the process:

This flowchart demonstrates that when a user navigates to a URL like /category/5/product/42, React Router matches it to the defined route, extracts the parameters, and renders the appropriate component.

Practical Example: Fetching Data Based on URL Parameters

To showcase a real-world application, let's implement a component that fetches product data from an API using the productId from the URL.

Step 1: Setting Up the Route

Copy
1
<Route path="/product/:productId" component={ProductDetail} />

Step 2: Implementing the ProductDetail Component

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function ProductDetail() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);

  useEffect(() => {
    // Replace with your API call
    fetch(`https://api.example.com/products/${productId}`)
      .then(response => response.json())
      .then(data => setProduct(data));
  }, [productId]);

  if (!product) {
    return <div>Loading...</div>;
  }

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

export default ProductDetail;

In this component:

• The useParams hook retrieves the productId from the URL.

• The useEffect hook performs an API call to fetch the product data whenever the productId changes.

• The component renders the product details once the data is fetched.

Wrapping Up: Mastering useParams in React

Using useParams in React makes working with dynamic routes easier and better. By getting URL params in functional components you can create flexible and interactive experiences. useParams makes code more readable and keeps routing logic clean which is inline with modern React practices. Using useParams makes managing dynamic routes more simple and organized.