React Router を使用して前のページに戻る

React は、現在最も一般的に使用されているフロントエンド ライブラリです。 ナビゲーションやその他の重要な機能がないため、フレームワークとは言えません。 したがって、React 開発者は通常、react-router などの外部ライブラリをインポートしてナビゲーション機能を実装します。

この記事は、React で重要なナビゲーション機能を実装するのに役立つことを目的としています。具体的には、React Router に前のページに戻るように指示する方法です。

React Router を使用して前のページに戻る

インターネットを閲覧した経験のある人なら誰でも、戻る機能がいかに重要であるかを理解しています。 ユーザーが前のページまたは URL に戻ることができる機能を React アプリ内に実装することは、優れた UX プラクティスです。

履歴スタック

インターネット ブラウザは、ユーザーの行動を記録します。 履歴スタックは、Web サイトをナビゲートする際のステップのコレクションです。

履歴スタックはブラウザの機能ですが、react-router ライブラリはこの情報を history オブジェクトにも保存します。 このオブジェクトを使用して、ユーザーがアプリケーションをスムーズにナビゲートできるようにすることができます。

React Router v4 および v5 を使用して前のページに戻る

react-router ライブラリの以前のバージョンでは、useHistory() フックを使用して特定のページに移動していました。 history オブジェクトのインスタンスへのアクセスを提供します。

.push()、.pop()、.replace() メソッドを使用して、必要に応じて URL を変更できます。 history インスタンスには goBack() メソッドがあり、前のページに移動できます。

例を見てみましょう：

function NavigateHome() {
  let history = useHistory();
  function handleClick() {
    history.push("/somePage");
  }
  function goBack() {
    history.goBack();
  }
    return (
    <div>
    <button onClick={handleClick}>
       Go to some page
    </button>
    <button onClick={goBack}>
       Go back
    </button>
    </div>

  );
}

この例では、ユーザーが最初のボタンをクリックするたびに、react-router は push() メソッドに引数として渡された URL にユーザーを誘導します。 ただし、ユーザーが 2 番目のボタンをクリックすると、前のページに戻ります。

React Router v6 を使用して前のページに戻る

React Router ライブラリの最新バージョンは、useHistory() フックをサポートしなくなりました。 ライブラリの開発者は、代わりに useNavigate() フックを使用することを推奨しています。

history とは異なり、navigate API では .push() やその他の JavaScript メソッドを使用する必要はありません。 引数自体を取ります。

また、.goBack() メソッドを使用する代わりに、引数を navigate インスタンスに変更する必要があります。 -1 を引数として navigate を呼び出すだけです。

上記の例は、navigate API を使用する React Router v6 で書き直すことができます。

import { useNavigate, Link, BrowserRouter as Router } from "react-router-dom";
export default function App() {
  let navigate = useNavigate();
  let goToAnotherPage = () => {
    navigate("/another");
  };
  let goToSomePage = () => {
    navigate("/somepage");
  };
  let goBack = () => {
    navigate(-1);
  };
  return (
    <div className="App">
      <span
        onClick={goToAnotherPage}
        style={{ backgroundColor: "yellow", fontSize: 33, padding: 5 }}
      >
        Go To Another Page
      </span>
      <br />
      <span
        onClick={goToSomePage}
        style={{ backgroundColor: "yellow", fontSize: 33, padding: 5 }}
      >
        Go To Some Page
      </span>
      <br />
      <span
        onClick={goBack}
        style={{ backgroundColor: "lightblue", fontSize: 33, padding: 5 }}
      >
        Go Back
      </span>
    </div>
  );
}

この例では、3つのボタンがあります。 最初の 2つはユーザーを特定の URL に誘導し、3 番目はユーザーを以前の場所に戻します。

navigate API を使用してそれを行いました。 navigate は、宛先 URL を引数として受け取る関数です。 -1 を引数に与えると前のページに戻ります。

CodeSandboxでコードをいじることができます。