React Router useLocation hook won't return the full URL when there is a # present in the URL-CodePudding

The way my routing is setup, the URL might be something like

localhost:3000/alpha/beta/gamma#4

When I use the location hook from react-router like follows:

let loc = useLocation();
useEffect(() => {
    console.log(loc.pathname)
})

It will console log:

alpha/beta/gamma

and cut off the #4. How can I avoid this from happening and return the full URL?

CodePudding user response：

you need to read the hash # from useLocation hook, try this :

import useLocation from "react-router-dom";

then inside your app

const { hash } = useLocation();

more about useLocation

CodePudding user response：

useLocation() creates a location object property which contains the following:

hash
pathname
search
state
key

According to RFC 3986 the query string (search) should come before the fragment (hash).

If you want to get a full URL, you should get the pathname with loc.pathname. Then check for query params aka search with loc.search, then fragments aka hash with loc.hash and concatenate them together.