【React】useHistoryを使ってLinkを使わない画面遷移の実装

useHistoryとは？
useHistoryの使い方

useHistoryとは？

useHistoryフックは、React Router v5以降で導入されたフックの1つで、Reactコンポーネントから履歴オブジェクトを操作するために使用されます。useHistoryフックを使用することで、Reactコンポーネント内でプログラム的にページ遷移を行ったり、ブラウザの履歴を操作したりすることができます。

useHistoryの使い方

以下は、useHistoryフックを使用した具体的な例です。

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

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

  function handleGoBack() {
    history.goBack();
  }

  function handleGoForward() {
    history.goForward();
  }

  function handleGoHome() {
    history.push('/');
  }

  return (
    <div>
      <h1>My Component</h1>
      <button onClick={handleGoBack}>Go back</button>
      <button onClick={handleGoForward}>Go forward</button>
      <button onClick={handleGoHome}>Go to home page</button>
    </div>
  );
}

この例では、useHistoryフックを使用して、historyオブジェクトを取得しています。そして、handleGoBack関数内で、history.goBackメソッドを使用して、前のページに戻ります。同様に、handleGoForward関数では、history.goForwardメソッドを使用して、次のページに進みます。そして、handleGoHome関数では、history.pushメソッドを使用して、ルートページに遷移します。

このように、useHistoryフックを使用することで、Reactコンポーネント内でブラウザの履歴を操作することができます。