React Router ハッシュフラグメントからクエリパラメータを取得する方法

2024-05-24

React Router ハッシュフラグメントからクエリパラメータを取得する方法

React Router は、React アプリケーションでルーティングと URL 管理を行うためのライブラリです。ハッシュフラグメントは、URL の "#" 記号の後に続く部分であり、クエリパラメータを含めるために使用できます。

このチュートリアルでは、React Router ハッシュフラグメントからクエリパラメータを取得する方法を説明します。

手順

useLocation フックは、現在の URL に関する情報を提供します。ハッシュフラグメントにアクセスするには、search プロパティを使用できます。

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

const App = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const queryParamValue = searchParams.get('paramName');

  return (
    <div>
      <p>クエリパラメータの値: {queryParamValue}</p>
    </div>
  );
};

export default App;

注意事項

ハッシュフラグメントは、クライアントサイドのみで利用できます。サーバーサイドではアクセスできません。
クエリパラメータは、URL エンコードする必要があります。

このチュートリアルでは、基本的な例のみを説明しています。より複雑なシナリオについては、React Router ドキュメントを参照してください。

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

const App = () => {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const queryParamValue = searchParams.get('paramName');

  return (
    <div>
      <p>クエリパラメータの値: {queryParamValue}</p>
    </div>
  );
};

export default App;

このコードは、次の URL にアクセスするときに動作します。

https://example.com/#?paramName=value

この場合、queryParamValue 変数には "value" という値が格納されます。

例 2: useParams フックを使用する

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

const App = () => {
  const params = useParams();
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const queryParamValue = searchParams.get('paramName');

  return (
    <div>
      <p>クエリパラメータの値: {queryParamValue}</p>
    </div>
  );
};

export default App;

https://example.com/#?paramName=value

このコードは、React Router バージョン 6.0 以上が必要です。

React Router ハッシュフラグメントからクエリパラメータを取得する他の方法

import React, { useState, useEffect } from 'react';

const App = () => {
  const [queryParamValue, setQueryParamValue] = useState('');

  useEffect(() => {
    const hashParams = new URLSearchParams(window.location.hash);
    const queryParamValue = hashParams.get('paramName');
    setQueryParamValue(queryParamValue);
  }, []);

  return (
    <div>
      <p>クエリパラメータの値: {queryParamValue}</p>
    </div>
  );
};

export default App;

カスタムフックを使用して、useLocation フックまたは window.location オブジェクトからクエリパラメータを取得できます。

import React, { useState, useEffect } from 'react';

const useQueryParam = (paramName) => {
  const [queryParamValue, setQueryParamValue] = useState('');

  useEffect(() => {
    const hashParams = new URLSearchParams(window.location.hash);
    const queryParamValue = hashParams.get(paramName);
    setQueryParamValue(queryParamValue);
  }, [paramName]);

  return queryParamValue;
};

const App = () => {
  const queryParamValue = useQueryParam('paramName');

  return (
    <div>
      <p>クエリパラメータの値: {queryParamValue}</p>
    </div>
  );
};

export default App;