在页面加载时从当前 URL 中读取参数值

Question

我意识到从 URL 中检索搜索参数是一个常见问题，但我在使用URLSearchParams(window.location.search)时遇到了问题，因为我相信它正在搜索? 我的网址包含&作为值之间的分隔符。

我的网址看起来像这样

http://localhost:8080/monitor/patientName=Courtney+Patient&pageSize=50

我的目标是在 url 中提取 searchParams 并将它们添加到加载时组件的状态。 所以我正在阅读整个 URL 并将其拆分为/这给了我一个看起来像这样的数组：

const queryString = window.location.pathname.split("/")[2]
const queries = queryString.split("&")

where queries returns: 
["patientName=Courtney+Patient","pageSize=50"]

我希望遍历我的默认状态，如果queries包含让我们说patientName ，则该值将替换为 URL 中保存的值。

但我不确定如何访问具有不同长度的密钥并将它们与 defaultStates 密钥进行比较。 我想知道是否有一种方法可以在不反复使用 .split("") 的情况下获取 URL 中的密钥？

Answer 1

我认为有效的查询字符串需要一个 ? 在第一个参数名称之前。

我认为最好避免使用 + ，因为它可能有点令人困惑。

所以，我认为你的 URL 应该是这样的： http://localhost:8080/monitor/?patientName=Courtney&pageSize=50

现在window.location.search会给你patientName=Courtney&pageSize=50

为了获取 PatientName 和 pageSize 参数的值，您可以使用以下代码：

const params = new URLSearchParams(window.location.search);

for (const [key, value] of params){
  console.log(key, ': ', value);
}

这在下面的代码片段中得到了证明，我用 window.location.search 替换了 'patientName=Courtney&pageSize=50' 因为在代码片段的上下文中我无法使用 window 对象：

 const params = new URLSearchParams('patientName=Courtney&pageSize=50'); for (const [key, value] of params){ console.log(key, ': ', value); }

我希望这有帮助。