web-dev-qa-db-ja.com

反応ルーターv4でクエリパラメーターを取得する方法

私のプロジェクトではreact-router-dom 4.0.0-beta.6を使用しています。私は次のようなコードを持っています：

<Route exact path="/home" component={HomePage}/>

そして、HomePageコンポーネントでクエリパラメータを取得したい。 location.search paramを見つけました。これは?key=valueのように見えるため、解析されません。

React-router v4でクエリパラメーターを取得する正しい方法は何ですか？

react-routerreact-router-v4react-router-dom
66
andrfas

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

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

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

あなたが何かネイティブなものが欲しくて、それがあなたの必要性のために働くならば、あなたはnew URLSearchParamsを使うこともできます

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

あなたは決定についてもっと読むことができます ここ

134
Tyler McGinnis

与えられた答えはしっかりしています。

あなたが query-string の代わりに qs モジュールを使いたいのであれば（それらはほぼ同じくらい人気があります）、ここに構文があります：

const query = qs.parse(props.location.search, {
  ignoreQueryPrefix: true
})

ignoreQueryPrefixオプションは、先頭の疑問符を無視するためのものです。

6
fisch2

受け入れられた答えはうまくいきますが、追加のパッケージをインストールしたくない場合は、これを使用できます。

getUrlParameter = (name) => {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    let results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
  };

http://www.google.co.in/?key=valueが与えられた

getUrlParameter('key');

valueを返します

4
kartikag01

え？

queryfie(string){
    return string
        .slice(1)
        .split('&')
        .map(q => q.split('='))
        .reduce((a, c) => { a[c[0]] = c[1]; return a; }, {});
}

queryfie(this.props.location.search);
2
Faheem

私は反応ルータv4のためのパラメータについて研究していました、そして彼らは反応ルータv2/3のようにではなく、v4のためにそれを使いませんでした。私は別の機能を残します - たぶん誰かがそれを役に立つと思うでしょう。あなただけのes6またはプレーンJavaScriptが必要です。

function parseQueryParams(query) {
  //You get a '?key=asdfghjkl1234567890&val=123&val2&val3=other'
  const queryArray = query.split('?')[1].split('&');
  let queryParams = {};
  for (let i = 0; i < queryArray.length; i++) {
    const [key, val] = queryArray[i].split('=');
    queryParams[key] = val ? val : true;
  }
  /* queryParams = 
     {
      key:"asdfghjkl1234567890",
      val:"123",
      val2:true,
      val3:"other"
     }
  */
  return queryParams;
}

また、この機能は改善することができます

2
Xopsy

私はこれを作ったので、もしあなたがルーターv4かそれ以降をより低いバージョンから反応させるために更新するならば（あなたがあなたがreduxルーターストアからの問い合わせを使う）コード構造全体を変える必要はありません。

https://github.com/saltas888/react-router-query-middleware

0
Dimitris Saltaferis

パッケージを必要としない場合

const params = JSON.parse(JSON.stringify(this.props.match.params));

それからparams.idで関連するパラメータに到達することができます

0
mesarikaya