React Router v6 でブラウザ履歴を自在に操る：useHistory、useLocation、Link、withRouter 徹底解説

React Router v6 では、useHistoryフックを使用してブラウザの履歴にアクセスして操作することができます。これは、前に訪れたページに戻る、特定のページに直接移動する、または履歴を操作して特定のナビゲーションを無効にするなどの機能を実現するために役立ちます。

useHistoryフックを使用するには、まず React コンポーネント内でインポートする必要があります。

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

次に、フックを呼び出して history オブジェクトを取得します。

const history = useHistory();

この history オブジェクトには、以下のメソッドが用意されています。

• push(path): 新しい履歴エントリを追加して、指定されたパスに移動します。
• goBack(): 1 つ前の履歴エントリに戻ります。
• goForward(): 次の履歴エントリに進みます。
• block(callback): 次回のナビゲーションをキャンセルするコールバック関数を登録します。
• createHref(path): 指定されたパスの URL を生成します。

例：前に訪れたページに戻る

以下のコードは、history.goBack()を使用して前に訪れたページに戻る例です。

const handleGoBack = () => {
  history.goBack();
};

<button onClick={handleGoBack}>前に戻る</button>

例：特定のページに直接移動する

const handleGoToDetails = (id) => {
  history.push(`/details/${id}`);
};

<button onClick={() => handleGoToDetails(123)}>詳細を見る</button>

例：履歴を操作して特定のナビゲーションを無効にする

useEffect(() => {
  const unblock = history.block((to, state) => {
    if (to.pathname === '/protected') {
      return true; // このルートへのナビゲーションをブロック
    }

    return undefined; // 他のルートへのナビゲーションは許可
  });

  return () => unblock();
}, []);

useHistory フックに関する詳細情報

useHistoryフックの詳細については、React Router v6 の公式ドキュメントを参照してください。

その他のヒント

• React Router v6 には、useLocationフックを使用して現在の場所情報にアクセスする方法もあります。
• React Router v6 は、Link コンポーネントを使用して、ナビゲーションリンクを簡単に作成することができます。

以下は、React Router v6 で履歴を使用する際のいくつかの例です。

この例では、useHistoryフックを使用して goBack() メソッドを呼び出し、前に訪れたページに戻ります。

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

function MyComponent() {
  const history = useHistory();

  const handleGoBack = () => {
    history.goBack();
  };

  return (
    <div>
      <button onClick={handleGoBack}>前に戻る</button>
    </div>
  );
}

この例では、useHistoryフックを使用して push() メソッドを呼び出し、/details/:id パスに指定された ID を持つ詳細ページに直接移動します。

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

function MyComponent() {
  const history = useHistory();

  const handleGoToDetails = (id) => {
    history.push(`/details/${id}`);
  };

  return (
    <div>
      <button onClick={() => handleGoToDetails(123)}>詳細を見る</button>
    </div>
  );
}

この例では、useHistoryフックを使用して block() メソッドを呼び出し、/protected パスへのナビゲーションを無効にします。

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

function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    const unblock = history.block((to, state) => {
      if (to.pathname === '/protected') {
        return true; // このルートへのナビゲーションをブロック
      }

      return undefined; // 他のルートへのナビゲーションは許可
    });

    return () => unblock();
  }, []);

  return (
    <div>
      {/* `/protected` へのリンクは許可されない */}
      <Link to="/">ホーム</Link>
    </div>
  );
}

これらの例は、React Router v6 で useHistory フックを使用して履歴にアクセスして操作する方法を理解するための出発点となるものです。詳細については、React Router v6 の公式ドキュメントを参照してください。

React Router v6 で履歴を使用するその他の方法

useHistory フック以外にも、React Router v6 で履歴にアクセスして操作することができます。以下に、いくつかの方法をご紹介します。

Link コンポーネントは、ナビゲーションリンクを作成するための便利なコンポーネントです。to プロパティを使用して、リンク先のパスを指定することができます。

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

function MyComponent() {
  return (
    <div>
      <Link to="/">ホーム</Link>
      <Link to="/about">詳細</Link>
      <Link to="/contact">お問い合わせ</Link>
    </div>
  );
}

Link コンポーネントは、内部的に useHistory フックを使用して push または replace メソッドを呼び出し、リンク先のパスに移動します。

useLocation フックを使用して、現在の場所情報にアクセスすることができます。この情報は、現在のパス、クエリパラメータ、ハッシュフラグメントなどの情報を取得するために使用できます。

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

function MyComponent() {
  const location = useLocation();

  const pathname = location.pathname;
  const search = location.search;
  const hash = location.hash;

  return (
    <div>
      <p>現在のパス: {pathname}</p>
      <p>クエリパラメータ: {search}</p>
      <p>ハッシュフラグメント: {hash}</p>
    </div>
  );
}

withRouter 高階コンポーネントを使用して、コンポーネントに history と location オブジェクトをプロップとして渡すことができます。

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

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

  const handleGoBack = () => {
    history.goBack();
  };

  return (
    <div>
      <button onClick={handleGoBack}>前に戻る</button>
      <p>現在のパス: {location.pathname}</p>
    </div>
  );
}

export default withRouter(MyComponent);

useRouteMatch フックを使用して、現在のルートに一致するルートオブジェクトを取得することができます。このオブジェクトには、現在のパス、マッチするパラメータ、およびその他の情報が含まれています。

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

function MyComponent() {
  const match = useRouteMatch('/users/:id');

  const id = match.params.id;

  return (
    <div>
      <p>ユーザー ID: {id}</p>
    </div>
  );
}

これらの方法は、useHistory フック以外にも、React Router v6 で履歴にアクセスして操作することができます。それぞれの方法には、それぞれ利点と欠点がありますので、状況に合わせて適切な方法を選択してください。