ReactJS useParams Hook

The useParams hook is a built-in hook in ReactJS that allows you to access the dynamic parameters from the URL in your React components. It is commonly used in conjunction with React Router to build dynamic and parameterized routes.

Usage

To use the useParams hook, you need to make sure you have installed and imported the necessary dependencies:

$ npm install react-router-dom

// Import the required dependencies
import { useParams } from 'react-router-dom';

Once you have imported the useParams hook, you can use it within a functional component:

function MyComponent() {
  const params = useParams();

  return (
    <div>
      <h1>URL Params</h1>
      <p>Param1: {params.param1}</p>
      <p>Param2: {params.param2}</p>
    </div>
  );
}

In the example above, the useParams hook is called, and it returns an object containing the parameter values from the URL. You can access these values directly by their corresponding names.

Example

Let's consider an example where we have a blog application with dynamic routes for each blog post. The URL pattern for each blog post is /blog/:id, where :id represents the unique identifier of the blog post.

// App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import BlogPost from './BlogPost';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/blog/:id" component={BlogPost} />
      </Switch>
    </Router>
  );
}

In the BlogPost component, we can use the useParams hook to access the id parameter from the URL:

// BlogPost.js
import React from 'react';
import { useParams } from 'react-router-dom';

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

  return (
    <div>
      <h1>Blog Post {id}</h1>
      {/* Rest of the blog post content */}
    </div>
  );
}

In this example, the id parameter is accessed using the useParams hook and rendered within the component. This allows us to dynamically display the correct blog post based on the URL.

Conclusion

The useParams hook in ReactJS is a powerful tool for working with dynamic parameters in URLs. It enables you to access URL parameters directly within your components, making it easier to create dynamic and parameterized routes in your React applications.