Reactでドメイン名を取得する方法

window.locationオブジェクトを使用する方法: Reactでは、windowオブジェクトにアクセスして現在のURL情報を取得できます。下記のコード例を参考にしてください。

const currentDomain = window.location.hostname;
console.log(currentDomain); // 現在のドメイン名がコンソールに表示されます

この方法では、windowオブジェクトのlocationプロパティにアクセスし、hostnameプロパティを使用して現在のドメイン名を取得します。

ライブラリを使用する方法: Reactでは、URL解析やドメイン名の取得に便利なライブラリがあります。その中でも、"url-parse"というライブラリが人気です。以下の手順に従って、このライブラリを使用する方法を示します。

まず、ターミナルまたはコマンドプロンプトで以下のコマンドを実行して、"url-parse"ライブラリをインストールします。

npm install url-parse

インストールが完了したら、Reactコンポーネントで次のようにインポートします。

import { parse } from 'url-parse';
// ...
const currentURL = window.location.href;
const parsedURL = parse(currentURL);
const currentDomain = parsedURL.hostname;
console.log(currentDomain); // 現在のドメイン名がコンソールに表示されます

この方法では、"url-parse"ライブラリのparse関数を使用して、現在のURLを解析し、hostnameプロパティからドメイン名を取得します。

以上がReactでドメイン名を取得する方法です。シンプルな方法とライブラリを使用する方法の両方を紹介しました。必要に応じて、プロジェクトの要件や好みに合わせて適切な方法を選択してください。