How to Use React Router: useParams

Explanation of useParams and Demonstration

People always say joining a hackathon would quickly enhance your skills. I am currently in a week-long hackathon and I couldn’t agree more on that statement. In this hackathon, I forced myself to learn something new, and one of them is useParams .

Intro

useParams is one of the Hooks methods that React Router ships with. I assume the reason you are here is that you want to learn how to use useParams when you are creating navigational components in React (I have to say React Router has one of the best documentation I have ever seen.).

Before we start talking about useParams , make sure you have installed React Router in your React app:

npm install react-router-dom

There are a few tags you may or may not recognize as we go through: <BrowserRouter> , <Router> , <Switch> , <Link> , <Route> .

There are also a few React Router Hook methods that I am still learning about: useHistory , useLocation , useRouteMatch , which I would not cover in this article.

According to the definition in React Router doc, useParams returns:

an object of key/value pairs of URL parameters. Use it to access match.params of the current <Route>.

What does it mean in plain English?

It means whatever you set up in useParams(ex: title), your params have to match with the <Route path='/path/:title'> .

Why use useParams?

When I first learned to React with my coding Bootcamp, my Bootcamp taught us to create multiple components and use handleClick to click for details of the items and use ternary conditions to replace the page. Not that it’s a bad idea, but I noticed a problem:

Screenshot from my capstone project

I don’t know if you noticed when I clicked on “Hong Kong Disneyland”, the position of Explore page is replaced by the details of Hong Kong Disneyland, and I have to scroll up to see the top of the page. Here’s the code:

As you can see, it’s more of a replacement, rather than directing the app to a new page/tab. Therefore, useParams would be a great use here, which would direct me to a new Route from the current URL.

I understand this is still quite ambiguous without an actual example. Let me demonstrate in the following.

Walkthrough

Let’s continue using my Explore page example as a demonstration, so we can see the changes. (Disclaimer: the data you saw is for demo purposes. In my actual project, the data was fetched from the Rails API I created.)

Step 1: Set up <Router> and <Route>

In our App.js (the parent), make sure we have to import the things we need from react-router-dom .

Explanation:

As you probably know BrowseRouter is to store the URL and to communicate with the webserver; the purpose of Switch and Route is when Switch is rendered, it searches through its children Route elements to match with the current URL. When it finds the match, the Switch will direct to the path in Route .

From what you can see in the last Route , it looks quite different from the others, because of /explore/:name . This /:name can be anything, as long as it matches with the parameters/keys of your data. This is also the key when we need to use useParams later on.

I also created three components:

• ExploreContainer — the container of the explore page;
• ExploreCard — display everything from data (our array of objects)
• ExploreDetail — display the details of the data.

Step 2: Pass down the children

In ExploreContainer.js ,

I only need this to contain the data

ExploreContainer.js

Step 3: <Link> to the following card

In ExploreCard.js , I would use map to map out all the data from the data list:

ExploreCard.js

As you can see in Line 9, we are using <Link> to connect what we have from <Route> in App.js and letting our apps know we are taking this to another location from the current URL. The {list.name} is essential since we would use that for a condition check later when we use useParams and make sure it matches the parameters from our Data list.

Step 4: Filter /:name and match with the correct data we want to see with useParams

Now we are in our final step when we are going to use useParams and don’t forget to import useParams !

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

First off, we need to make sure the { name } matches with our /explore/:name parameter. Basically, you can name the parameter anything you want, but you would want to match with one of the key in your list so there’s no confusion.

That’s pretty much how we do this!

Here’s a quick demo from a project I am currently doing (there’s no styling in this project yet)

Demo

As you can see when I click on the name, the URL bar would add the name of the person. That’s the magic of <Router> -> <Route> -> <Link> .

Conclusion

That’s all I got! Hopefully, this helps a bit with your current project if you are struggling with how to use useParams . I apologize in advance this article doesn’t have the most technical explanation since I am still in my learning process.

If you are looking for more resources, this guy did an amazing job walking through how to use useParams .

Check it out to see how he implemented these methods in real-time and don’t forget to check out the React-Router documentation and see other fun methods that you can implement for your future!

Happy coding!