A Look at React Hooks: useParams for Dynamic Routing

A Look at React Hooks: useParams for Dynamic Routing

A simple way to implement dynamic routing with this useful Hook!

Welcome to another article of A Look at React Hooks, a beginner-friendly series on React Hooks. In this article, let's look at a simple application of the useParams Hook.

Before reading this article, you should know the following:

  • Basic knowledge of React
  • React Router basics

What is Dynamic Routing?

Let's say you have a website that has many different products and you wish to redirect the user to the product's page when the product link is clicked.

You will probably have something like this setup in React Router:

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

export default function Products() {
  return (
    <div>
      <h1>This is products page</h1>
        <ul>
            <li><Link to="/products/product1">Product 1</Link></li>
            <li> <Link to="/products/product2">Product 2</Link></li>
            <li> <Link to="/products/product3">Product 3</Link></li>
        </ul>
    </div>
  );
}

And then, you will have to create a component function for every product page...

//Product1.js for product1
import React from "react";

function Product1() {
  return (
    <div>
      <h1>This is a page for PRODUCT 1</h1>
    </div>
  );
}

//Product2.js for product2
function Product2() {
  return (
    <div>
      <h1>This is a page for PRODUCT 2</h1>
    </div>
  );
}

// And so on...

Dynamic routing solves this hard coding problem by allowing us to conditionally render whatever page we want. This is where the useParams Hook comes in.

useParams Example

First, in our App.js, let us define a dynamic path /products/:id. This :id will be the parameter that represent any product id and will display that specific product's page accordingly.

Instead of creating a component for every product, we now just need one Product component.

Our App.js will be as follows:

import "./App.css";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "./components/Home";
import Products from "./components/Products";
import Product from "./components/Product";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/products" element={<Products />} />
          <Route path="/products/:id" element={<Product/>} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

Finally, we just need to configure our conditionally rendered Product component to access the id parameter using useParams.

import React from 'react'
import { useParams } from 'react-router-dom'

export default function Product() {
    const {id} = useParams(); //get the URL parameters

  return (
    <div>
        <h1>This is a product page for product {id} </h1></div>
  )
}

About useParams

As you can see from the above example, implementing dynamic routing with useParams is pretty simple and straightforward.

The useParams Hook returns an object of key/value pairs from the current URL's dynamic parameters.

As long as the params are matched to the <Route path>, the Hook will be able to access these values.

Below is another example taken from the official documentation.

function ProfilePage() {
  // Get the userId param from the URL.
  let { userId } = useParams();
}

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

Conclusion

In this article, we have learned about dynamic routing and how to use the useParams Hook to implement it. I hope this article has helped you understand this Hook better.

Thanks for reading! Please share and like the article if it has been a helpful read. Also, do share in the comments if you'd like me to write more useful applications of other React Hooks. Cheers!

Did you find this article valuable?

Support Victoria Lo by becoming a sponsor. Any amount is appreciated!

ย