How to Retrieve URL Parameters in ReactJS?

In ReactJS, you can retrieve URL parameters (also known as query parameters) using the useLocation hook from React Router or by using the URLSearchParams API directly if you’re not using React Router. Below are both methods for getting URL parameters in React:

1. Using React Router (v6 or later)

If your React app uses React Router, the useLocation hook provides access to the current location, including the URL and query parameters.

First, ensure that React Router is installed and set up in your project:

#bash
npm install react-router-dom

Then, you can use the useLocation hook to get the query parameters:

#javascript
import React from 'react';
import { useLocation } from 'react-router-dom';

const MyComponent = () => {
  const location = useLocation(); // Get the current location
  const searchParams = new URLSearchParams(location.search); // Parse query parameters

  // Get specific query parameters
  const param1 = searchParams.get('param1'); 
  const param2 = searchParams.get('param2'); 

  return (
    <div>
      <p>Param 1: {param1}</p>
      <p>Param 2: {param2}</p>
    </div>
  );
};

export default MyComponent;

In this example, if the URL is http://example.com?param1=value1&param2=value2, the param1 and param2 values will be extracted and displayed.

2. Without React Router (Using URLSearchParams)

If you are not using React Router, you can use the URLSearchParams API available in the browser to parse the query parameters.

#javascript #jsx
import React, { useEffect, useState } from 'react';

const MyComponent = () => {
  const [params, setParams] = useState(null);

  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search); // Get query params from the URL
    const param1 = urlParams.get('param1');
    const param2 = urlParams.get('param2');
    setParams({ param1, param2 });
  }, []);

  return (
    <div>
      {params ? (
        <>
          <p>Param 1: {params.param1}</p>
          <p>Param 2: {params.param2}</p>
        </>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default MyComponent;

In this example, the window.location.search gives the query string part of the URL (e.g., ?param1=value1&param2=value2), and the URLSearchParams API is used to extract the parameters.

3. Accessing Dynamic Route Parameters with React Router

If you’re using dynamic routes (e.g., /user/:id), you can access route parameters with the useParams hook from React Router.

#javascript
import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
  const { id } = useParams(); // Access the 'id' route parameter
  return <p>User ID: {id}</p>;
};

export default UserProfile;

If the URL is /user/123, the id will be 123.

Review:

• React Router (v6+): Use useLocation for query params (location.search) and useParams for dynamic route parameters.
• No React Router: Use the URLSearchParams API to get query parameters from window.location.search.

These methods provide flexible ways to access URL parameters in React, depending on your routing setup.

Best Practices for Implementing Coding Filters!

To get the most out of coding filters, it’s essential to follow best practices when implementing them. This includes writing reusable filter functions, keeping logic modular, and ensuring that filters are applied consistently throughout your codebase. These practices improve code quality and make it easier to scale and maintain.