React のクエリ文字列から URL パラメータ値を取得する

1. React ルーターV3
2. React ルーターV4 と React ルーターV5

React アプリを作成するプロセス全体を通じて、クエリ文字列からパラメーター値を抽出する必要がある場合があります。これにより、アプリ全体でパラメータ値を参照できるようになります。

2017 年の React Router v4 のリリースに伴い、解析された this.props.location.query プロパティが削除されました。開発者は、クエリ文字列からパラメータ値を読み取るための新しいアプローチを見つける必要がありました。この記事では、React の新旧バージョンのソリューションを見ていきます。

React ルーターV3

React Router v3 の query 文字列からパラメータ値を抽出するのは簡単です。このバージョンの React はすべての作業を行い、解析された場所を props として提供します。次のオブジェクトの値を確認する場合：

this.props.location.query

クエリ内のすべてのパラメータのキー-値のペアが含まれていることがわかります。 （クエリは、? 記号の後に続く URL の一部です）

query オブジェクトに探しているパラメータが含まれていない場合は、次の場所からアクセスできる path パラメータ値も確認する必要があります。

this.props.match.params.redirectParam

React Router v3 がインストールされたアプリを実行している限り、コンポーネントは props を受け入れ、query 文字列と path からパラメーター値を取得できます。

v4 以降、this.props.location.query オブジェクトが削除されました。削除された主な理由は、開発者がクエリ文字列を格納するための独自の方法を作成できるようにするためでした。

React ルーターV4 と React ルーターV5

React Router v4 の query には引き続きアクセスできますが、開発者は独自に文字列に変換する必要があります。この正確な問題を解決するために、qs や query-string などのライブラリが作成されました。

新しい ReactRouter バージョンでは、更新されたインターフェースと query-string ライブラリを使用して、query オブジェクトを解析できます。

const queryToStr = require('query-string');
const result = queryToStr.parse(this.props.location.search);

クラスコンポーネント用

上記の例は、React のクラスコンポーネントに適用されます。

ライブラリを使用して this.props.location.search を解析すると、パラメータとその値の key-value ペアを含む、解析された query オブジェクトを返すことができます。

機能コンポーネント用

過去数年間、React コミュニティは、機能コンポーネントを優先してクラスコンポーネントを放棄し始めました。スイッチの背後にある主な理由は、React フックを使用する機能コンポーネントの新しい機能でした。

query 文字列からパラメータ値を抽出するときは、this.props.location.search の値を使用する代わりに、useLocation() フックのインスタンスを使用します。

フックは、解析された query オブジェクトを返しません。パラメータとその値の key-value ペアを取得するには、フックのインスタンスを解析する必要があります。

v4（またはそれ以降）バージョンの React-Router でアプリケーションを実行する場合、次のコードで目的の結果が得られます。

const queryToStr = require('query-string');
const result = queryToStr.parse(useLocation().search);

useLocation() フックのおかげで、このコードはずっときれいに見えます。