React で現在の URL を取得する

1. React で現在の URL を取得-Vanilla JavaScript Solution
2. React ルーター経由で現在の URL を取得
3. 現在の URL React ルーターフックを取得する

React でシングルページアプリケーションを開発する場合、ルーティングはパズルの重要な部分です。すべての URL には、表示する必要のあるコンポーネントやその他のビジュアルが含まれている場合があります。

React アプリを構築する場合、開発者は多くの場合、現在の URL に基​​づいてさまざまなアクションを実行する必要があります。開発者は、複数の異なるインターフェースを使用して現在の URL にアクセスできます。

React で現在の URL を取得-Vanilla JavaScript Solution

React は通常の JavaScript に基づいているため、window インターフェースの location プロパティにアクセスできます。現在の URL のフルパスを取得するには、window.location.href を使用し、ルートドメインなしでパスを取得するには、代わりに window.location.pathname にアクセスします。

例を見てみましょう：

class App extends Component {
  render() {
    console.log(window.location.href);
    return <h1>Hi! Try edit me</h1>;
  }
}

playcode.io で App コンポーネントをレンダリングすると、コンソールにプロジェクトへの完全な URL が表示されます。この場合、それは https://playcode.io/837468/になります。代わりに console.log(window.location.pathname) を使用すると、コンソール出力は/837468/になります。このリンクをたどって、自分でコードを試してみてください。

window.location を読むことは、現在の URL を取得するための優れたシンプルなソリューションです。ただし、一般的な window.location インターフェイスに依存しています。

React 固有のソリューションを探している場合は、読み続けてください。

React ルーター経由で現在の URL を取得

React は history-package を提供し、props を介して location オブジェクトを分離します。これは基本的に window インターフェースで使用できる location オブジェクトと同じですが、React 用にカスタマイズされています。

このオブジェクトは、アプリの現在の URL を表します。それにアクセスする最も簡単な方法は、props の location オブジェクトを読み取ることです。

ただし、location を props で提供するには、React Router をインストールし、子コンポーネントを Route コンポーネントに接続する必要があります。例えば：

<Route path="/" component={App}></Route>

この例では、App コンポーネントは props を介して location オブジェクトにアクセスできます。このコンポーネント内で、this.props.location.pathname を読み取ることができます。これは、ルートドメインを含まないパス URL を返します。

<Route> コンポーネントでレンダリングされた子コンポーネントは、location props にもアクセスできます。次に例を示します。

<Route path="/" render={() => <App></App>} />

この場合、アプリコンポーネントは引き続き location プロップへのアクセスを保持します。

this.props.location が undefined を返す場合、React コンポーネントはカスタム <Route> コンポーネントの外部にレンダリングされている可能性があります。この場合、高次コンポーネント（HOC）withRouter をインポートし、それを使用して location および history props にアクセスできます。

withRouter は react-router-dom パッケージからインポートできます。次に例を示します。

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
class App extends Component {
      render(){...}
}

export default withRouter(App)

デフォルトのエクスポート App コンポーネントを withRouter HOC でラップすると、特別な <Route> コンポーネントでレンダリングされたコンポーネントでのみ使用できる props にアクセスできるようになります。

現在の URL React ルーターフックを取得する

機能コンポーネントを使用すると、フックを使用できます。私たちの状況では、useLocation() は location オブジェクトにアクセスする簡単な方法を提供する優れたフックです。

react-router-dom パッケージからインポートできます。この例では、useLocation() フックを使用して location オブジェクトを取得し、それを変数に格納します。

みてみましょう：

import { useLocation } from "react-router-dom"
const sampleLocation = useLocation();

location オブジェクトを変数に保存したら、sampleLocation.pathname にアクセスしてパス（ルートドメインなしの URL）にアクセスできます。

history オブジェクトの location プロパティにアクセスすることもできます。

useHistory フックを使用すると、それにアクセスできます。ただし、可変性の懸念があるため、公式の react-router ドキュメントでは、location オブジェクトを使用することをお勧めします。