ReactJS useParams Hook

In ReactJS, when building single-page applications (SPAs) with dynamic routing, you often need to access dynamic data from the URL.

For example, in a blog application, the URL will change depending on the post being viewed, like /post/:id. The useParams hook, provided by the react-router-dom package, allows you to access these dynamic parts of the URL, known as route parameters, in your components.

What is useParams?

useParams is a hook in React Router that allows you to access route parameters from the current URL. A route parameter is a part of the URL that is variable (e.g., /product/:id), and it can be used to pass data to components dynamically.

const { param1, param2, ... } = useParams();

• param1, param2, etc., are the names of the route parameters defined in the path.
• useParams returns an object where the keys are the parameter names, and the values are the corresponding values from the URL.

Prerequisites:

• NPM & Node.js
• React JS
• react-router-dom

Steps to Create React Application and Installing Modules

Step 1: Create a React application using the following command.

npx create-react-app useparams_react

Step 2: After creating your project folder i.e. useparams_react, move to it using the following command.

cd useparams_react

Step 3: After creating the ReactJS application, Install the react-router-dom and react-dom packages using the following command.

npm install react-router-dom@6

Project structure:

The updated dependencies in package.json file.

"dependencies": {
  "@testing-library/jest-dom": "^5.17.0",
  "@testing-library/react": "^13.4.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.9.0",
  "react-scripts": "5.0.1",
  "web-vitals": "^2.1.4"
}

React Code:

import React from "react";
import { BrowserRouter as Router, Route, Routes, useParams } from "react-router-dom";

function BlogPost() {
  let { id } = useParams();
  return <div style={{ fontSize: "50px" }}>Now showing post {id}</div>;
}

function Home() {
  return <h3>Home page</h3>;
}

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/page/:id" element={<BlogPost />} />
      </Routes>
    </Router>
  );
}

export default App;

• useParams is called inside the BlogPost component to fetch the dynamic parameter id from the URL.
• The URL /post/:id means that the value for id is dynamically passed and can be accessed via useParams.

Output

raman111

Follow

Improve

Article Tags :

• Web Technologies
• ReactJS
• React-Hooks