ReactJS useParams Hook

The useParams hook in React Router provides access to dynamic URL parameters (such as /user/:id). It allows components to retrieve values from the URL, enabling dynamic content rendering based on the route's parameters.

Syntax

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

In the above syntax:

• 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.

Now let's understand this with the help of example:

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; 

Output

In this example

• 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.