web-dev-qa-db-ja.com

反応ルーターv4でクエリ文字列を解析する方法

反応ルーターv3では、props.location.query.fooでアクセスできました（現在の場所が?foo=barの場合）

[email protected]props.locationにはprops.location.searchのみがあり、withは?foo=bar&other=thingのような文字列です。

おそらく、その文字列を手動で解析および分解して、fooまたはotherの値を見つける必要があります。

console.log(this.props)のスクリーンショット： enter image description here （?artist=bandからどのようにartistから値を取得したいかに注意してください。これはbandの値です）

reactjsreact-routerreact-router-dom
32
Peter Bengtsson

すでに正しいと思っているようです。クエリ文字列を解析する機能はV4から削除されました。これは、長年にわたってさまざまな実装をサポートする要求があったためです。それにより、チームは、その実装がどのように見えるかをユーザーが決定することが最善であると判断しました。クエリ文字列libをインポートすることをお勧めします。 あなたが言及したもの はこれまでのところ私にとってはうまく機能しました。

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

決定の詳細についてはこちらをご覧ください こちら

74
Tyler McGinnis

query-string モジュールを使用すると、最適化された実動ビルドの作成中に次のエラーが発生する場合があります。

このファイルからコードを縮小できませんでした：./node_modules/query-string/index.js:8

これを克服するには、ビルドの実行中に問題なく同じプロセスを問題なく実行する stringquery という代替モジュールを使用してください。

import querySearch from "stringquery";

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

ありがとうございました。

18
Balasubramani M

私は自分の小さな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;
                }, {}
            )
        : {}
};

すべてがここにあります、あなたを助けることを願っています。

5
AmerllicA

この投稿を見つけてよかったです。リンクをありがとう、数時間後、ついにコードがアップグレードされました。

クエリ文字列を使用している人は、次のようなことをする必要があるかもしれません

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

私の場合、これは起こり、this.props.location.search.theUrlYouWantは動作を拒否しました。 Tylerが言及した2番目のオプションも、同様の調整で機能しました。

4
DORRITO