如何使用 window.location.hash 和 reactjs 获取 url 值？答案

【问题标题】：How to get url values with window.location.hash and reactjs?如何使用 window.location.hash 和 reactjs 获取 url 值？
【发布时间】：2020-04-03 09:16:55
【问题描述】：

我有这个 url http://localhost:3000/#/consultation/?idc=xxxd?iduser=Hyfzjg2，我想获取 idc 和 iduser 的值，以便在我的 API 上使用 ReactJs。

我试试这个：

let isInitialized = false;
const initialValues = {};
const initValues = () => {
    if (isInitialized === false) {
        const searchParams = new URLSearchParams(window.location.hash);
        const values = [
            { urlKey: "idc", stateKey: "idC" },
            { urlKey: "iduser", stateKey: "idUser" },
        ];
        values.forEach(item => {
            const urlValue = searchParams.get(item.urlKey)
            if (urlValue) {
                initialValues[item.stateKey] = urlValue;
            }
        });
        isInitialized = true;
    }
    return initialValues;
};

console.log(initValues())

当我运行它时，我得到 {} 一个空值。

如何获取idc 和iduser 的值？

【问题讨论】：

您的网址没有有 search 组件。查询字符串。
@CBroe 我更正它，window.location.hash
不确定 URLSearchParams 构造函数是否会正确解析这样的值。 MDN 说，领先的? 被忽略，但您的值仍然以#/consultation/ 开头。
@CBroe 谢谢，你可以查看我的回答，效果很好

标签： javascript reactjs url search window.location

【解决方案1】：

我认为你的路径构造不正确：

如果您有路径 http://localhost:3000/consultation 并且您想添加一个查询字符串，那就是 http://localhost:3000/consultation?idc=xxxx 和 window.location.search 将是 ?idc=xxxx 然后。

# 是页面上某个元素的选择器，例如#section=4，因此您通常会滚动到该部分。这看起来像这样：

http://localhost:3000/consultation#section=4 而window.location.hash 将是“#section=4”

【讨论】：

“我认为你的路径构造不正确” - 这种 URL 结构对于“单页”应用程序或使用客户端的系统非常常见 -侧路由。更改 actual 查询字符串将强制重新加载当前页面；仅更改 URL 片段部分不会这样做。所以一个“假”的查询字符串放在 inside 片段中用于那些场景。
谢谢@CBroe，不知道。那么你的解决方案肯定是有道理的，对不起@CodeLover！

【解决方案2】：

我纠正了它，它运作良好：

const  getUrlParams = (search) =>{
  let hashes = search.slice(search.indexOf('?') + 1).split('&')
  return hashes.reduce((params, hash) => {
      let [key, val] = hash.split('=')
      return Object.assign(params, {[key]: decodeURIComponent(val)})
  }, {})
}

console.log(getUrlParams(window.location.hash))

【讨论】：