如何使用 React 获取查询字符串？

Question

我正在尝试从网址 http://localhost:3000/?query=123 获取“query=123”。试过了

//App.js
const search = this.props.location.search;
const params = new URLSearchParams(search);
const foo = params.get('foo');

console.log(this.props);

我的控制台显示了这个 https://d.pr/i/w5tAYF ，它没有在任何地方显示 location.search ……知道如何获取查询字符串吗？

原文由 Tina 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React 不处理 URL 搜索参数。您需要查看 window 对象来代替它们。以下是获取 query 值的方法：

 let search = window.location.search;
let params = new URLSearchParams(search);
let foo = params.get('query');

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我为查询字符串创建了一个单独的函数。

 function useQuery() {
  return new URLSearchParams(window.location.search);
}

然后我可以提供我想要获取的查询字符串。在你的情况下它 query

   let query = useQuery().get('query');

原文由 Khondoker Zahidul Hossain 发布，翻译遵循 CC BY-SA 4.0 许可协议