React ルーターの history オブジェクト

1. React ルーターの history
2. リダイレクト用の React ルーターhistory
3. React ルーターV4 の history.push()

ナビゲーションは、最新のアプリケーションの重要な部分です。JavaScript ベースのフレームワークは通常、さまざまなナビゲーションソリューションの基盤となるデフォルトの history オブジェクトに依存しています。このオブジェクトは、DOM の Window オブジェクトのプロパティとして使用できます。

React でアプリケーションを開発する場合、開発者は React ルーターライブラリを使用できます。ブラウザの history インターフェイスの改良版である history パッケージを含む、すべてのナビゲーション機能を提供します。React Router の history オブジェクトには、action、location、.push()、.replace() など、ナビゲーションの構成に使用できる多くのプロパティとメソッドが含まれています。以下のセクションでは、これらのプロパティとメソッドを最適に使用して、主要なナビゲーションのニーズを処理する方法を確認します。

React ルーターの history

history パッケージ（または単に history）は、JS でセッション履歴を管理するために必要な主要なツールです。前に述べたように、それは多くの方法を含み、それらはすべて独自の方法で役立ちます。それでも、history.push() メソッドは間違いなく最も重要であり、ガイドの主な焦点になります。

history スタック

ブラウザは、ユーザーがアクセスしたさまざまな URL を追跡します。このセッション history は history スタックと呼ばれ、ブラウザの戻るボタンまたは進むボタンが機能するために必要です。

history オブジェクトには、history スタックに影響を与える可能性のあるプロパティとメソッドがあります。たとえば、.replace() メソッドは、history スタックの最新のパスを置き換えます。 .length プロパティは、スタック内のエントリの数を示します。

.push() メソッドはおそらく最も重要で広く使用されています。開発者はこれを使用してエントリをスタックにプッシュし、ユーザーを別のページにリダイレクトします。この方法は不可欠であり、ガイドの後半で詳しく説明します。

location

ロケーションオブジェクトには、アプリの現在の（場合によっては過去の）パス名に関する情報が表示されます。React Router は、このオブジェクトを複数回利用できるようにします。たとえば、props オブジェクトのプロパティとして Route コンポーネントでアクセスできます。詳細については、公式の React ルータードキュメントを参照します。

history オブジェクトには location プロパティもあります。ただし、history オブジェクトは変更可能であるため、location プロパティの値を使用することはお勧めしません。代わりに、<ルート> の props を介して location にアクセスできます。このようにして、正しい location 情報にアクセスしていることを確認できます。

リダイレクト用の React ルーターhistory

アプリケーションを開発するとき、ユーザーがアクションを実行した後、ユーザーのパスを変更する必要があることがよくあります。これを行うには、イベントハンドラーを設定し、.push() メソッドを使用して特定のパス名にリダイレクトする必要があります。

React ルーターV5 の history.push()

フックの導入以来、機能コンポーネントははるかに便利になりました。v5 のリリースに伴い、react-router-dom は、history オブジェクトに簡単にアクセスするための useHistory() フックの提供も開始しました。実際の例を見てみましょう。

import { useHistory } from "react-router-dom";
function Homepage() {
  let historyObj = useHistory();
  function handleClick() {
    historyObj.push("/");
  }
  return (
    <div>
    ...
    <button onClick={() => handleClick()}>
      Go to Homepage
    </button>
    ...
    </div>
  );
}

この例では、単純なホームページコンポーネントがあります。まず、react-router-dom パッケージから useHistory フックをインポートします。これを機能させるには、バージョン 5 の react-router-dom（またはそれ以降）をインストールする必要があります。フックは、historyObj 変数に格納されているコンポーネントの history オブジェクトを返します。

前述の .push(string) メソッドをハンドラー関数で使用できます。このメソッドは、1つの文字列引数を受け入れます。文字列を history スタックにプッシュし、ユーザーを指定されたパスに移動します。

React ルーターV4 の history.push()

React Router のバージョン 4 には useHistory フックが含まれていないため、props を介して history オブジェクトを渡す必要があります。これは、フックと互換性のないクラスコンポーネントの history にアクセスする唯一の方法でもあります。

ハンドラー関数で .push() メソッドを使用して、別のパスに移動できます。この例を見てみましょう：

function handleClick() {
  this.props.history.push('/')
}

props を介して history オブジェクトにアクセスするには、コンポーネントがそのオブジェクトにアクセスできることを確認する必要があります。これを行うには 2つの方法があります。

1. <Route> の component 属性を使用して、特定のコンポーネントにリンクします。例えば：

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

この場合、ホームページコンポーネントは、props を介して history オブジェクトにアクセスできます。

2. render 属性を使用して関数を定義します。props を提供し、次の構文を使用します。

<Route path="/" render={(props) => <Homepage {...props} />}/>