59

在 react-router v3 我可以访问它props.location.query.foo（如果当前位置是?foo=bar）

中react-router-dom@4.0.0 props.location只有props.location.searchwith 是一个字符串，如?foo=bar&other=thing.

也许我需要手动解析和解构该字符串以找到fooor的值other。

截图console.log(this.props)：（ 在此处输入图像描述 注意?artist=band我想从这里获取值artist的值band）

4

8 回答 8

140

看起来你已经假设正确了。解析查询字符串的能力已从 V4 中移除，因为多年来一直存在支持不同实现的请求。有了这个，团队决定最好让用户来决定实现的样子。我们建议导入查询字符串库。到目前为止，你提到的那个对我来说效果很好。

const queryString = require('query-string');

const parsed = queryString.parse(props.location.search);

new URLSearchParams如果您想要本地的东西并且它可以满足您的需求，您也可以使用

const search = props.location.search; // could be '?foo=bar'
const params = new URLSearchParams(search);
const foo = params.get('foo'); // bar

您可以在此处阅读有关该决定的更多信息

于 2017-03-17T17:58:02.767 回答
23

我提供我的小ES6形状功能，很棒，重量轻且有用：

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

东西都在这里，希望能帮到你。

于 2018-07-16T09:54:42.067 回答
20

使用查询字符串模块创建优化的生产构建时，您可能会收到以下错误。

无法缩小此文件中的代码：./node_modules/query-string/index.js:8

为了克服这个问题，请使用名为stringquery的替代模块，该模块在运行构建时可以很好地完成相同的过程而没有任何问题。

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);

谢谢你。

于 2018-06-13T12:03:02.917 回答
6

很高兴我找到了这篇文章。感谢您的链接，几个小时后，我终于升级了我的代码。

对于那些使用查询字符串的人，您可能需要执行类似的操作

var nameYouWant = queryString.parse(this.props.location.search).nameYouWant;

这发生在我的情况下，并且this.props.location.search.theUrlYouWant会拒绝工作。Tyler 提到的第二个选项也对我进行了一些类似的调整。

于 2017-04-02T04:40:39.573 回答
5

使用第三方包对于简单的解决方案来说太过分了

componentDidMount() {
        const query = new URLSearchParams(
            this.props.location.search
        );

        let data= {};

        for (let params of query.entries()) {
            data[params[0]] = +params[1];
        }
        this.setState({ urldata: data});
    }

这将简单地将 URL 数据转换为对象。

于 2020-04-30T08:27:29.023 回答
4

我很惊讶没有人提到UrlSearchParams和.get方法。

于 2020-07-16T18:08:34.813 回答
3

您可以使用一个简单的函数来提取查询参数，而不是安装一个包。

//Param Extractor
const parseParams = (params = "") => {
  const rawParams = params.replace("?", "").split("&");
  const extractedParams = {};
  rawParams.forEach((item) => {
    item = item.split("=");
    extractedParams[item[0]] = item[1];
  });
  return extractedParams;
};

//Usage
const params = parseParams(this.props?.location?.search); // returns an object like:
// {id:1,name:john...}
于 2020-06-15T08:27:56.380 回答
1

将查询字符串作为字符串获取的情况的迟到答案queryString

 import queryString from 'query-string';
 import useLocation from 'react-router';

 const handleQueryString = queryString.stringify(queryString.parse(useLocation().search));
 // nice=day&very=sunny
于 2021-11-29T23:46:09.317 回答