score:5

Accepted answer

You need to use useLocation hook and get the hash from there. First step is to import useLocation from react-router-dom:

import useLocation from "react-router-dom";

Inside the component function, use this:

const { hash } = useLocation();

From the docs:

useLocation

The useLocation hook returns the location object that represents the current URL. You can think about it like a useState that returns a new location whenever the URL changes.

This could be really useful e.g. in a situation where you would like to trigger a new “page view” event using your web analytics tool whenever a new page loads

score:0

In a URL like this: "/myUrl/products/product12?myQuery=12#myHash" The UseParams will return everything up to the query e.g "/myUrl/products/product12" but not the query "?myQuery=12#myHash".

React has a hook for this "useLocation". Use Location will give you an object with 4 things but only 3 that you need to worry about for this example, ( "pathname": "/myUrl/products/product12", "search": "myQuery=12", "hash": "myHash")

import { useLocation } from 'react-router-dom';
const QueryDetails = () => {
    const location = useLocation();
    const myQuery  = location.search;

return (
        <div className='container mt-2'>
           <p>{myQuery}</p>
        </div>
    );
}
 
export default QueryDetails;

Related Query

More Query from same tag