React Router v4 での履歴プッシュ

React Router v4 で履歴をプッシュする方法の日本語解説

React Router v4 では、history オブジェクトを使用してブラウザの履歴を操作できます。このオブジェクトは、withRouter HOC (Higher-Order Component) を使用してコンポーネントに提供されます。

withRouter を使用して history を取得する

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

function MyComponent(props) {
  const { history } = props;

  // 履歴をプッシュする処理
  const pushToHistory = () => {
    history.push('/new-path');
  };

  return (
    <div>
      <button onClick={pushToHistory}>新しいパスに移動</button>
    </div>
  );
}

export default withRouter(MyComponent);

history.push() を使用して履歴をプッシュする

• path: プッシュする新しい URL のパスです。
• history.push(path): 指定された path にブラウザの履歴をプッシュします。

例

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

function MyComponent(props) {
  const { history } = props;

  const handleButtonClick = () => {
    // 新しいパス "/users/123" に履歴をプッシュ
    history.push('/users/123');
  };

  return (
    <div>
      <button onClick={handleButtonClick}>ユーザー詳細ページへ</button>
    </div>
  );
}

export default withRouter(MyComponent);

重要ポイント

• プッシュするパスは、ルートのパスから相対的なパスまたは絶対パスを使用できます。
• history.push() を使用して新しいパスを履歴にプッシュします。
• withRouter を使用してコンポーネントに history オブジェクトを提供する必要があります。

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

function MyComponent(props) {
  const { history } = props;

  // 履歴をプッシュする処理
  const pushToHistory = () => {
    history.push('/new-path');
  };

  return (
    <div>
      <button onClick={pushToHistory}>新しいパスに移動</button>
    </div>
  );
}

export default withRouter(MyComponent);

• history
  withRouter によってコンポーネントに提供されるオブジェクトで、ブラウザの履歴を操作するためのメソッドを提供します。
• withRouter
  react-router-dom からインポートされる HOC (Higher-Order Component) です。

history.push('/new-path');

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

function MyComponent(props) {
  const { history } = props;

  const handleButtonClick = () => {
    // 新しいパス "/users/123" に履歴をプッシュ
    history.push('/users/123');
  };

  return (
    <div>
      <button onClick={handleButtonClick}>ユーザー詳細ページへ</button>
    </div>
  );
}

export default withRouter(MyComponent);

• history.push('/users/123')
  新しいパス /users/123 に履歴をプッシュします。
• handleButtonClick
  ボタンクリック時に実行される関数です。

コードの解説

Link コンポーネントを使用する

• to プロパティにプッシュするパスを指定します。
• Link コンポーネントは、プログラム的に履歴をプッシュするのではなく、ユーザーのクリックによって履歴をプッシュします。

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

function MyComponent() {
  return (
    <div>
      <Link to="/new-path">新しいパスに移動</Link>
    </div>
  );
}

useNavigate フックを使用する

• useNavigate() を呼び出すと、navigate 関数が返されます。
• useNavigate フックは、history オブジェクトの代わりに使用できます。

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

function MyComponent() {
  const navigate = useNavigate();

  const pushToHistory = () => {
    navigate('/new-path');
  };

  return (
    <div>
      <button onClick={pushToHistory}>新しいパスに移動</button>
    </div>
  );
}

history オブジェクトの他のメソッドを使用する

• history オブジェクトには、push() 以外にも履歴を操作するためのメソッドがあります。
  • replace(): 現在の履歴エントリを新しい履歴エントリに置き換えます。
  • goBack(): 前の履歴エントリに戻ります。
  • goForward(): 次の履歴エントリに進みます。

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

function MyComponent(props) {
  const { history } = props;

  const replaceHistory = () => {
    history.replace('/new-path');
  };

  return (
    <div>
      <button onClick={replaceHistory}>現在の履歴を置き換える</button>
    </div>
  );
}

react-router-dom の他の機能を使用する

• react-router-dom には、履歴操作やナビゲーションの制御のための他の機能があります。
  • Redirect コンポーネント: プログラム的に特定のパスにリダイレクトします。
  • Route コンポーネント: 特定のパスにマッチするコンポーネントをレンダリングします。