UseParam()

Ravi Mehto — Tue, 16 May 2023 17:20:51 +0000

The useParams hook is a powerful feature provided by React Router, a popular routing library for React applications. It allows you to access and extract URL parameters dynamically within your React components. This is particularly useful when you have dynamic routes with varying parameters.

Here's how you can use the useParams hook in a React application:

a. Install React Router: First, ensure that you have React Router installed in your project. You can do this by running the following command:

   npm install react-router-dom

b. Import the required dependencies: In the component where you want to access URL parameters, import the necessary dependencies:

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

c. Define dynamic routes: Set up your routing configuration with dynamic segments using the colon (:) notation to denote parameters. For example:

   <Route path="/users/:id" component={UserDetails} />

d. Access parameters using useParams: In your component, call the useParams hook to retrieve the parameter value:

   function UserDetails() {
     const { id } = useParams();

     // Use the `id` value to fetch user details or perform other operations

     return (
       <div>
         <h2>User Details</h2>
         <p>User ID: {id}</p>
       </div>
     );
   }

In this example, if the URL is /users/0123, the id variable will be assigned the value '0123'. You can then utilize this value within your component for fetching user details or implementing relevant logic.

Forem: Ravi Mehto

UseParam()