Reactで現在のURLを読み取るメリットとデメリット

2024-04-02

Reactで現在のURL全体を読み取る方法

useLocation Hookは、現在のURLを含むさまざまな情報を提供します。このHookを使うと、現在のURL全体を読み取るだけでなく、クエリパラメータやハッシュフラグメントなどの情報も取得できます。

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

const App = () => {
  const { pathname, search, hash } = useLocation();

  const fullUrl = pathname + search + hash;

  return (
    <div>
      現在のURL: {fullUrl}
    </div>
  );
};

window.location オブジェクトは、ブラウザの現在のURLに関する情報を提供します。このオブジェクトを使って、現在のURL全体を取得することができます。

const fullUrl = window.location.href;

console.log(fullUrl); // https://example.com/path/to/page?param1=value1&param2=value2#hash

useParams Hookは、URLパラメータの値を取得するために使用されます。このHookを使って、現在のURLのパラメータ値から、URL全体を生成することができます。

import { useParams } from 'react-router-dom';

const App = () => {
  const { id } = useParams();

  const fullUrl = `/path/to/page/${id}`;

  return (
    <div>
      現在のURL: {fullUrl}
    </div>
  );
};

現在のURL全体とクエリパラメータやハッシュフラグメントなどの情報も取得したい場合は、useLocation Hookを使うのがおすすめです。
現在のURL全体だけを取得したい場合は、window.location オブジェクトを使うのが最も簡単です。
URLパラメータの値からURL全体を生成したい場合は、useParams Hookを使うのがおすすめです。

Reactで現在のURL全体を読み取るには、いくつかの方法があります。それぞれの方法の特徴を理解して、状況に合わせて適切な方法を選びましょう。

補足

useLocation Hookは、React Router v6以降で使用できます。

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

const App = () => {
  const { pathname, search, hash } = useLocation();

  const fullUrl = pathname + search + hash;

  return (
    <div>
      現在のURL: {fullUrl}
    </div>
  );
};

このコードを実行すると、コンソールに現在のURL全体が出力されます。

useLocation Hook以外にも、window.location オブジェクトや useParams Hookを使って現在のURL全体を読み取ることができます。

window.location オブジェクトを使う例

const fullUrl = window.location.href;

console.log(fullUrl); // https://example.com/path/to/page?param1=value1&param2=value2#hash

useParams Hookを使う例

import { useParams } from 'react-router-dom';

const App = () => {
  const { id } = useParams();

  const fullUrl = `/path/to/page/${id}`;

  return (
    <div>
      現在のURL: {fullUrl}
    </div>
  );
};

現在のURL全体を読み取る他の方法

history.location オブジェクト

const fullUrl = history.location.href;

console.log(fullUrl); // https://example.com/path/to/page?param1=value1&param2=value2#hash

URLSearchParams オブジェクトは、URLのクエリパラメータを操作するために使用できます。このオブジェクトを使って、クエリパラメータから現在のURL全体を生成することができます。

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

const fullUrl = `${window.location.pathname}?${urlSearchParams.toString()}`;

console.log(fullUrl); // https://example.com/path/to/page?param1=value1&param2=value2

自作の関数

上記の方法以外にも、自作の関数を使って現在のURL全体を読み取ることもできます。

function getFullUrl() {
  return `${window.location.protocol}//${window.location.host}${window.location.pathname}${window.location.search}${window.location.hash}`;
}

const fullUrl = getFullUrl();

console.log(fullUrl); // https://example.com/path/to/page?param1=value1&param2=value2#hash