React/Next.jsでの戻るボタン実装
2024-10-16
React.js, Next.jsにおける「前のページに戻る」機能の解説 (日本語)
React.js と Next.js は、JavaScript でウェブアプリケーションを開発するためのフレームワークです。これらにおいて、ユーザーが「前のページに戻る」機能を実装するには、一般的に ブラウザの履歴 を操作します。
history オブジェクトの使用
React.js では、react-router-dom ライブラリを使用してルーティングを管理することが一般的です。このライブラリには、history オブジェクトが提供されており、ブラウザの履歴を操作するためのメソッドが用意されています。
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleGoBack = () => {
history.goBack();
};
return (
<button onClick={handleGoBack}>前のページに戻る</button>
);
}
history.goBack()メソッドは、ブラウザの履歴で一つ前のページに移動します。
Link コンポーネントの使用
react-router-dom の Link コンポーネントを使用して、指定したパスに遷移することができます。これを使って、前のページへのリンクを作成することもできます。
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/">前のページに戻る</Link>
);
}
/は、ルートパス (通常はアプリケーションのトップページ) を指します。
Next.jsにおけるルーティング
Next.js は、ファイルシステムベースのルーティングを採用しており、ページの遷移はファイルのパスに対応しています。そのため、前のページに戻るには、router オブジェクトを使用して、一つ前のページのパスに遷移します。
import { useRouter } from 'next/router';
function MyComponent() {
const router = useRouter();
const handleGoBack = () => {
router.back();
};
return (
<button onClick={handleGoBack}>前のページに戻る</button>
);
}
注意
- より複雑なルーティングや状態管理が必要な場合は、
reduxやcontext APIなどを活用することができます。 - ブラウザの履歴が操作されるため、ユーザーが意図しないページに戻る可能性があります。この点には注意が必要です。
React/Next.jsでの戻るボタン実装のコード解説 (日本語)
React.jsでの実装
react-router-domを使用した実装
import { useHistory } from 'react-router-dom';
function MyComponent() {
const history = useHistory();
const handleGoBack = () => {
history.goBack();
};
return (
<button onClick={handleGoBack}>前のページに戻る</button>
);
}
Linkコンポーネントを使用した実装
import { Link } from 'react-router-dom';
function MyComponent() {
return (
<Link to="/">前のページに戻る</Link>
);
}
import { useRouter } from 'next/router';
function MyComponent() {
const router = useRouter();
const handleGoBack = () => {
router.back();
};
return (
<button onClick={handleGoBack}>前のページに戻る</button>
);
}
コードの解説
-
インポート
react-router-domの場合:useHistoryまたはLinkをインポートします。- Next.jsの場合:
useRouterをインポートします。
-
historyまたはrouterオブジェクトの取得
useHistoryまたはuseRouterフックを使用して、ブラウザの履歴またはルーティングに関する情報を取得します。
-
クリックイベントハンドラー
-
履歴操作
-
ボタンのレンダリング
カスタム履歴管理
- 手動でのページ遷移
履歴スタックに基づいて、window.history.pushState()やwindow.history.replaceState()を使用してブラウザの履歴を操作します。 - 独自の履歴スタック
アプリケーション内で履歴を管理する配列やオブジェクトを作成し、ユーザーのナビゲーションに応じて更新します。
react-router-domのuseLocationフック
- 履歴の操作
現在のURLに基づいて、history.goBack()やhistory.go(-1)を使用してブラウザの履歴を操作します。 - 現在のURLの取得
useLocationフックを使用して、現在のURLを取得します。
- 履歴の操作
遷移先のURLを指定することで、ブラウザの履歴を操作します。 - プログラムによるナビゲーション
useNavigateフックを使用して、プログラム的にページを遷移します。
- パラメータの取得
useParamsフックを使用して、URLパラメータを取得します。
- ルートのマッチング
useRouteMatchフックを使用して、現在のURLがどのルートにマッチするかを取得します。
react-router-domのuseHistoryフックとlocationオブジェクト
- 履歴の操作
useHistoryフックを使用して、ブラウザの履歴を操作します。
reactjs next.js
