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¶m2=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¶m2=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
) anduseParams
for dynamic route parameters. - No React Router: Use the
URLSearchParams
API to get query parameters fromwindow.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.