🛣️ React Router – Dynamic Routes with useParams

What is useParams Hook in React Router?

In a React app, sometimes we want to access the parameters of the current route (like id, username, etc.). In this case, the useParams hook comes into action.

The useParams hook is part of react-router-dom. It returns an object of key/value pairs of the dynamic parameters from the current URL matched by the <Route path>.

Let’s create a dynamic route /user/:id and fetch the id parameter using useParams.

• The route path /user/:id contains a dynamic segment :id.
• When the URL is /user/101, useParams() returns { id: "101" }.
• We can use this parameter to fetch data, display info, or perform actions.