Open In App

ReactJS useParams Hook

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

React JS useParams Hook helps to access the parameters of the current route to manage the dynamic routes in the URL. The react-router-dom package has useParams hooks that let you access and use the parameters of the current route as required.

Prerequisites:

Approach:

  • Define the dynamic routes for the specific components in which we want to access parameters.
  • Using the useParams hook access the URL and hence the params from the URL.
  • Use the Params inside the component and display it on the UI.

Syntax for useParams Hook:

useParams();

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 i --save react-router-dom@5 react-dom

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": "^5.3.4",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}

Example: This example use useParam to access and use params inside the component from the URL.

Javascript




// Filename - App.js
 
import React from "react";
 
import {
    BrowserRouter as Router,
    Switch,
    Route,
    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>
            <Switch>
                <Route path="/page/:id">
                    <BlogPost />
                </Route>
                <Route path="/">
                    <Home />
                </Route>
            </Switch>
        </Router>
    );
}
 
export default App;


Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output. You can see what you have passed in the URL as “: id” is displayed on the screen. In this way, you can access the parameters of the current route’s URL.



Last Updated : 24 Nov, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads