ReactでURLにクエリ文字列を追加する方法

Reactを使用してURLにクエリ文字列を追加する方法を説明します。以下の手順に従ってください。

1. URLの現在のクエリ文字列を取得します。これは、URLSearchParamsオブジェクトを使用して行うことができます。以下のコード例を参考にしてください。

const urlParams = new URLSearchParams(window.location.search);

2. クエリ文字列を追加するために、URLSearchParamsオブジェクトを使用します。set()メソッドを使用して、キーと値のペアを追加します。以下のコード例を参考にしてください。

urlParams.set('key', 'value');

3. 更新されたクエリ文字列を含む新しいURLを作成します。URLSearchParamsオブジェクトのtoString()メソッドを使用して、文字列としてのクエリ文字列を取得し、それを元に新しいURLを作成します。以下のコード例を参考にしてください。

const newURL = window.location.pathname + '?' + urlParams.toString();

4. 新しいURLにリダイレクトするか、それを使用して必要な処理を行います。