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

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

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

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

クエリ文字列を解析する機能は、さまざまな実装をサポートするための要求が何年にもわたってあったため、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

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

与えられた答えは確かです。

クエリ文字列の代わりにqsモジュールを使用する場合（人気はほぼ同じです）、構文は次のとおりです。

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

ignoreQueryPrefixのオプションでは、主要な疑問符を無視することです。

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

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

別の便利なアプローチは、URLSearchParamsこのように箱から出して使用することです。

  let { search } = useLocation();

   const query = new URLSearchParams(search);
   const paramField = query.get('field');
   const paramValue = query.get('value');

クリーンで読みやすく、モジュールを必要としません。以下の詳細情報;

• https://reacttraining.com/react-router/web/example/query-parameters
• https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

私はreactrouter v4のパラメーターについて調べていましたが、react router 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;
}

また、この機能を向上させることができます

え？

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);

私はこれを作ったばかりなので、ルーターv4以降を下位バージョンから反応させるように更新する場合は、コード構造全体（reduxルーターストアからのクエリを使用する場所）を変更する必要はありません。

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

非常に簡単

フックを使うだけ useParams()

例：

ルーター：

<Route path="/user/:id" component={UserComponent} />

あなたのコンポーネントで：

export default function UserComponent() {

  const { id } = useParams();

  return (
    <>{id}</>
  );
}

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

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

次に、関連するパラメータに到達できます。 params.id