React Router: A Quick Introduction to useParams

Photo by Sigmund on Unsplash

What is useParams?

useParams is a React Router Hook that allows you to access dynamic parameters in the URL.

useParams returns an object of key:value pairs of URL parameters. The key is the name you've assigned in the URL; the value is what is being passed in.

How do we use useParams?

  • Import useParams from react-router-dom.
  • Replace the part of the path that you would like to access as a parameter with a colon and an identifier of your choice. If you had a path that showed you the specials and the specials changed every day, your path would look something like this: /specials/:currentDay, where currentDay is dynamic based on the day.
  • Declare that same variable name in the component where you will be managing the params, using the syntax let { currentDay } = useParams();.
  • You can access multiple params in one url, e.g. /specials/:currentDay/:birthdaySpecial, and you can use destructuring syntax to declare them, like this: let { currentDay, birthdaySpecial } = useParams();.
  • Parameters are mandatory by default. If you would like your parameter to be optional, simply add a ? after it in the path, like this: /specials/:currentDay/:birthdaySpecial?. (Remember that you'll have to handle this condition in your component!)

Web Developer, @junocollege alum (cohort 13).