Geek Culture
Published in

Geek Culture

How to Use React Router: useParams

Explanation of useParams and Demonstration

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.).

npm install react-router-dom

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

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.)

  • ExploreCard — display everything from data (our array of objects)
  • ExploreDetail — display the details of the data.
ExploreContainer.js
ExploreCard.js
import { useParams } from 'react-router-dom'
Demo

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store