如何在 react-router v4 中解析查询字符串

Question

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

在 react-router-dom@4.0.0 props.location 中只有 props.location.search 是一个类似 ?foo=bar&other=thing 的字符串

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

console.log(this.props) 的截图： （注意如何从 ?artist=band 这里我想从 artist 得到值 band ）

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

Answer 1

看起来你已经假设正确了。解析查询字符串的能力已从 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

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

原文由 Tyler McGinnis 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我提供我的小 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;
                }, {}
            )
        : {}
};

东西都在这里了，希望对你有帮助。

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