React Router Domを使用したクエリパラメータの処理方法

クエリパラメータの取得: React Router Domでは、useLocationフックを使用して現在のURLの情報を取得できます。これを使用して、クエリパラメータを取得します。以下は例です。

import { useLocation } from 'react-router-dom';
function MyComponent() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);

  const param1 = queryParams.get('param1');
  const param2 = queryParams.get('param2');

  // クエリパラメータの値を使ってコンポーネント内の処理を行う
  // ...
}

クエリパラメータの設定: クエリパラメータを設定するには、React Router DomのLinkコンポーネントを使用します。以下は例です。

import { Link } from 'react-router-dom';
function MyComponent() {
  return (
    <Link to={{ pathname: '/path', search: '?param1=value1&param2=value2' }}>
      リンク
    </Link>
  );
}

クエリパラメータの更新: クエリパラメータを更新するには、React Router Domのhistoryオブジェクトを使用します。以下は例です。

import { useHistory } from 'react-router-dom';
function MyComponent() {
  const history = useHistory();

  function updateParams() {
    const newParams = new URLSearchParams();
    newParams.append('param1', 'newvalue1');
    newParams.append('param2', 'newvalue2');

    history.push({ search: newParams.toString() });
  }
// クエリパラメータの更新を行うための処理
  // ...
}

これらの方法を使用することで、React Router Domでクエリパラメータを処理することができます。これにより、異なるコンポーネント間でデータを共有し、URLの状態を適切に管理することができます。