当 URL 中存在 # 时，React 路由器使用位置钩子不会返回完整的 URL

Question

我的路由设置方式，URL可能类似

localhost:3000/alpha/beta/gamma#4

当我使用react路由器的位置挂钩时，如下所示：

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

它将控制台日志：

alpha/beta/gamma

并切断#4。如何避免这种情况发生并返回完整的URL？

Answer 1

useLocation((创建一个包含以下内容的位置对象属性：

• 散列
• 路径名
• 搜索
• 州
• 钥匙

根据RFC 3986，查询字符串(search(应该在片段(hash(之前。

如果要获取完整的URL，则应获取带有loc.pathname的路径名。然后用loc.search检查查询参数aka搜索，然后用loc.hash对aka哈希进行分段并将它们连接在一起。

Answer 2

您需要从useLocation挂钩读取[哈希#]和[搜索]值，请尝试以下操作：

import useLocation from "react-router-dom";

然后在你的应用程序中

const { hash, search } = useLocation();

更多关于useLocation