withRouter 高階コンポーネントを使って前のページに戻る

2024-04-09

React Routerで前のページに戻る方法と履歴の設定

useNavigate フックは、プログラム的にページ遷移を制御するために使用できます。前のページに戻るには、goBack 関数を使用します。

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

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

  const handleBackClick = () => {
    navigate(-1);
  };

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

このコードは、handleBackClick 関数が呼び出されるたびに、ブラウザ履歴を1つ戻って前のページを表示します。

<Link> コンポーネントは、別のページへのリンクを作成するために使用できます。to 属性に -1 を指定すると、前のページへのリンクになります。

<Link to="-1">前のページへ戻る</Link>

このコードは、ユーザーがリンクをクリックすると、ブラウザ履歴を1つ戻って前のページを表示します。

history オブジェクトは、ブラウザ履歴を操作するために使用できます。前のページに戻るには、goBack メソッドを使用します。

import { history } from "react-router-dom";

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

<button onClick={handleBackClick}>前のページへ戻る</button>

履歴の設定

react-router は、いくつかのオプションを使用して履歴を設定できます。

basename: アプリケーションのベース URL を設定します。
defaultHistory: 使用する履歴オブジェクトを設定します。
getUserConfirmation: ページ遷移前に確認ダイアログを表示するかどうかを設定します。

これらのオプションは、createBrowserRouter 関数または createHashRouter 関数の引数として渡されます。

const router = createBrowserRouter({
  basename: "/my-app",
  defaultHistory: createBrowserHistory(),
  getUserConfirmation: (to, from) => {
    // ページ遷移前に確認ダイアログを表示するかどうかを判断する
  },
});

React Routerで前のページに戻るには、いくつかの方法があります。どの方法を使用するかは、アプリケーションの要件によって異なります。

App.js

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

const Home = () => {
  return (
    <div>
      <h1>ホーム</h1>
      <Link to="/about">Aboutへ移動</Link>
    </div>
  );
};

const About = () => {
  return (
    <div>
      <h1>About</h1>
      <button onClick={() => window.history.back()}>前のページへ戻る</button>
    </div>
  );
};

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

このコードを実行すると、ブラウザに2つのページが表示されます。

ホームページ
Aboutページ

Aboutページで "前のページへ戻る" ボタンをクリックすると、ホームページに戻ります。

上記の3つの方法以外にも、前のページに戻る方法はいくつかあります。

<Redirect> コンポーネントを使う
withRouter 高階コンポーネントを使う
useHistory フックを使う

これらの方法は、より複雑な要件を満たす必要がある場合に使用できます。

React Routerで前のページに戻るためのその他の方法

<Redirect> コンポーネントは、ユーザーを別のページにリダイレクトするために使用できます。前のページに戻るには、to 属性に -1 を指定します。

<Redirect to="-1" />

withRouter 高階コンポーネントは、コンポーネントに history オブジェクトへのアクセスを提供します。前のページに戻るには、history.goBack() メソッドを使用できます。

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

const MyComponent = ({ history }) => {
  const handleBackClick = () => {
    history.goBack();
  };

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

const WrappedComponent = withRouter(MyComponent);

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

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

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

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