【React Router】A Summary of useParams

#reactrouter #react

Here's a quick summary of useParams.

“A tool for easily extracting necessary information from URLs.”

For example, consider this URL:

/users/123

Here, the number “123” represents the “user ID”.
But writing code normally won't automatically capture this “123”.

That's where useParams comes in.

const { id } = useParams();

Just writing this lets you extract parts of the URL, like:

id = “123”

Product page /products/45 → Want to retrieve “Information for product number 45”

Article page /articles/99 → Want to display “Content for article ID 99”

User page /users/123 → Want to show “Profile for user 123”

For pages like these, where the displayed content changes based on the URL, useParams becomes essential.

useParams is a convenient mechanism that lets you use parts like :id or :name within a URL in your code.

DEV Community