我正在尝试从 url 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 ......知道我将如何获取查询字符串吗？
React 不处理 URL 搜索参数。您需要在window对象中查找它们。以下是获取 值的方法query：
let search = window.location.search;
let params = new URLSearchParams(search);
let foo = params.get('query');
我为查询字符串创建了一个单独的函数。
function useQuery() {
return new URLSearchParams(window.location.search);
}
然后我可以提供我想要获取的查询字符串。在你的情况下query
let query = useQuery().get('query');
在您的组件中，您可以执行以下操作：
const values = queryString.parse(this.props.location.search)
console.log(values.filter)
console.log(values.origin)
还有更多的在这里。
如果您想从自定义 URL 获取查询参数，而不是当前打开的 URL，您可以使用下面的代码。
const customURL = 'https://custom.url.com?success=true'
const params = new URLSearchParams(customURL.split('?')[1])
const successParamValue = params.get('success')
如果您使用的是React Native，则需要额外的步骤来支持URLSearchParams. 只需安装下面的包。而已！
npm install react-native-url-polyfill
或者
yarn add react-native-url-polyfill