React Router v6 で前のルートに戻る方法の解説 (日本語)

React Router v6 では、useNavigateフックを使用して前のルートに戻る方法が提供されています。

useNavigateフックのインポート

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

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

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

  const handleGoBack = () => {
    navigate(-1); // ひとつ前のルートに戻る
  };

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

解説

• navigate(-1)
  ひとつ前のルートにナビゲートします。負の値を指定することで、履歴を遡ることができます。
• useNavigateフック
  現在のナビゲーションの状態にアクセスし、プログラム的にルートを変更するためのフックです。

他のオプション

• ルートスタックをクリアして特定のルートに戻る
  

  navigate('/previous-route', { replace: true });
  

• 特定のルートに戻る
  

  navigate('/previous-route'); // 具体的なルートを指定
  

注意点

• 複雑なナビゲーションロジックが必要な場合は、useLocationフックを使用して現在のルート情報を取得し、それに基づいてナビゲーションを制御することもできます。
• 履歴が空の場合、navigate(-1)はエラーになります。これを防ぐために、適切な条件分岐を使用してください。

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

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

  const handleGoBack = () => {
    navigate(-1); // ひとつ前のルートに戻る
  };

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

特定のルートに戻る例

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

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

  const handleNavigateToHome = () => {
    navigate('/'); // ホームページに戻る
  };

  return (
    <div>
      <button onClick={handleNavigateToHome}>ホームに戻る</button>
    </div>
  );
}

ルートスタックをクリアして特定のルートに戻る例

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

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

  const handleNavigateToLogin = () => {
    navigate('/login', { replace: true }); // ログインページに戻り、履歴をクリア
  };

  return (
    <div>
      <button onClick={handleNavigateToLogin}>ログイン画面に戻る</button>
    </div>
  );
}

• { replace: true }
  現在の履歴エントリを新しい履歴エントリで置き換えます。これにより、前のルートに戻ったときに、ブラウザの「戻る」ボタンが使用できなくなります。
• navigate('/previous-route')
  特定のルートにナビゲートします。
• navigate(-1)
  ひとつ前のルートにナビゲートします。

useLocationフックと historyオブジェクトの使用

import { useNavigate, useLocation, useHistory } from 'react-router-dom';

function MyComponent() {
  const navigate = useNavigate();
  const location = useLocation();
  const history = useHistory();

  const handleGoBack = () => {
    // 履歴の最後のエントリを取得し、そのインデックスを使用して前のルートにナビゲート
    const previousIndex = history.entries.length - 2;
    navigate(history.entries[previousIndex].pathname);
  };

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

• navigate(history.entries[previousIndex].pathname)
  履歴の前のエントリのパスを使用して、前のルートにナビゲートします。
• history.entries
  履歴のエントリの配列を取得します。
• historyオブジェクト
  ブラウザの履歴に関する情報を提供します。
• useLocationフック
  現在のルートの情報を取得します。

useSearchParamsフックを使用したクエリパラメータの利用

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

function MyComponent() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();

  const handleGoBack = () => {
    // クエリパラメータから前のルートを取得し、ナビゲート
    const previousRoute = searchParams.get('previousRoute');
    if (previousRoute) {
      navigate(previousRoute);
    } else {
      // クエリパラメータがない場合は、デフォルトの動作を使用
      navigate(-1);
    }
  };

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

• searchParams.get('previousRoute')
  クエリパラメータから前のルートを取得します。
• useSearchParamsフック
  クエリパラメータを管理します。

カスタム履歴管理の使用

• ReduxまたはContext APIを使用して、アプリケーション独自の履歴管理を実装し、より柔軟なナビゲーション制御を実現することができます。