Reactでクエリパラメータの値を取得する方法

Reactでクエリパラメータの値を取得する方法

Reactでクエリパラメータの値を取得するには、react-router-domを使用するのが一般的です。
以下はTypeScriptを使用してクエリパラメータを取得する方法の例です。
ライブラリのインストール手順も含めます。

ライブラリのインストール

npm install react-router-dom

yarn add react-router-dom

コード例

以下は、useLocationフックを使用してクエリパラメータを取得する例です。

import React from 'react';
import { useLocation } from 'react-router-dom';

const useQuery = () => {
  return new URLSearchParams(useLocation().search);
}

const Home: React.FC = () => {
  const query = useQuery();
  const name = query.get('name') || 'Guest';

  return (
    <div>
      <h1>こんにちは、{name}さん!</h1>
    </div>
  );
}

export default Home;

useLocationフックを使用して現在のURLからクエリパラメータを取得し、nameパラメータの値を表示します。
この方法で、Reactアプリケーション内でクエリパラメータを簡単に取得できます。