[React] useParams

[mahfujul-helios]

useParams

What is useParams

The useParams hook in React Router provides a convenient way to access and extract parameters from the current route in a React application. When a URL contains dynamic segments defined in the route configuration, such as IDs or usernames, useParams allows you to retrieve and utilize these values within your components. By importing and invoking useParams, you can access the parameter values and assign them to variables for further processing or rendering. This enables you to create dynamic and personalized components that respond to the specific parameters in the URL. useParams is a valuable tool for working with routing and parameter-based functionality in React applications utilizing React Router.

How it(useParams) works

The useParams hook in React Router works by accessing and extracting the parameter values from the current route's URL. Here's how it works:

Integration: To use useParams, you need to have React Router installed and set up in your application. This typically involves importing necessary components from the 'react-router-dom' package and defining your routes using the component.

Route Configuration: In your route configuration, you define routes with dynamic segments or placeholders. For example, /users/:userId defines a route with a dynamic userId parameter.

Hook Invocation: Inside a component rendered by a component, you can invoke the useParams hook to access the parameter values. By importing useParams from 'react-router-dom', you can call it within the component.

Parameter Extraction: When useParams is called, it returns an object containing the parameter values extracted from the current route's URL. The object's keys correspond to the parameter names defined in the route configuration, and the values represent the actual parameter values from the URL.

Utilizing Parameter Values: Once you have the parameter values, you can assign them to variables or use them directly in your component's logic. This allows you to dynamically render content or perform actions based on the specific parameter values from the URL.

Example of useParams

Import the necessary components and hooks from React Router:

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch, useParams } from 'react-router-dom';

Create a functional component, UserProfile, to display user information:

const UserProfile = () => {
  const { username } = useParams();
  // Simulated user data based on the 'username' parameter
  const user = {
    username: username,
    name: 'John Doe',
    bio: 'Web Developer',
    followers: 500,
    following: 200,
  };
  return (
    <div>
      <h1>{user.username}'s Profile</h1>
      <p>Name: {user.name}</p>
      <p>Bio: {user.bio}</p>
      <p>Followers: {user.followers}</p>
      <p>Following: {user.following}</p>
    </div>
  );
};

Set up the main application component, App, with routing and navigation:

const App = () => (
  <Router>
    <nav style={{ display: 'flex', gap: '20px' }}>
      <Link to="/users/johndoe">John Doe</Link>
      <Link to="/users/janesmith">Jane Smith</Link>
    </nav>
    <Switch>
      <Route path="/users/:username" component={UserProfile} />
    </Switch>
  </Router>
);

Export the App component as the main entry point of the application:

export default App;