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.

useParams Hook in ReactJS

Visit Course

useParams Hook in ReactJS

ReactJS useParams Hook