If you're encountering the error "Query param is undefined" when using React Router, it likely means that you're trying to access the query parameters of a URL before they've been parsed by React Router.
You can access query parameters in React Router using the useLocation hook, which returns the current location object that contains information about the URL, including its query parameters.
Here is an example of how you can use the useLocation hook to access query parameters in a functional component:
javascript
Copy code
import { useLocation } from 'react-router-dom';
function MyComponent() {
const location = useLocation();
const queryParams = new URLSearchParams(location.search);
const myParam = queryParams.get('myParam');
return (
<div>
My query param is: {myParam}
</div>
);
}
In this example, useLocation returns the current location object, and the URLSearchParams constructor is used to parse the search property of the location object into a set of query parameters that can be accessed using the get method.
Additionally, it's also important to make sure that the query parameter is present in the URL before trying to access it. You can check if the query parameter exists by using an if statement and the has method:
csharp
Copy code
if (queryParams.has('myParam')) {
// myParam exists in the URL, you can access it
const myParam = queryParams.get('myParam');
} else {
// myParam does not exist in the URL
}
If the query parameter does not exist in the URL, you can handle this case by either displaying a default value or by rendering a different component.
By using the useLocation hook and the URLSearchParams constructor, you can easily access query parameters in your React Router applications.