[React] 画面遷移でページを開いた時だけ戻るボタンを表示する

2022.02.12

こんにちは、CX事業本部 IoT事業部の若槻です。

以前の下記エントリではブラウザの履歴を操作してみました。

これをReactでも実現しようと色々触っていたところ、画面遷移でページを開いた時だけ戻るボタンを表示する(裏を返せば直接開いた時は表示しない)という実装が出来たので共有します。

実装

「Home page」画面(/)の実装です。ボタンクリックにより「Sub Page」と「my profile」に遷移可能です。

src/Home.js

import React from 'react';

const Home = (props) => {
  return (
    <div>
      <h1>Home page</h1>
      <ul>
        <li>
          <button
            onClick={() => {
              props.history.push({
                pathname: '/sub',
                state: { sourcePage: 'Home' }
              });
            }}
          >
            Go to sub page
          </button>
        </li>
        <li>
          <button
            onClick={() => {
              props.history.push({
                pathname: '/profile',
                state: { sourcePage: 'Home' }
              });
            }}
          >
            Go to my profile
          </button>
        </li>
      </ul>
    </div>
  );
};

export default Home;

「Sub page」画面(/sub)の実装です。ボタンクリックにより「my profile」への遷移と、遷移元ページへの遷移が可能です。

src/Sub.js

import React from 'react';

const Sub = (props) => {
  return (
    <div>
      <h1>Sub page</h1>
      <ul>
        <li>
          <button
            onClick={() => {
              props.history.push({
                pathname: '/profile',
                state: { sourcePage: 'Sub' }
              });
            }}
          >
            Go to my profile
          </button>
        </li>
        {props.location.state && (
          <li>
            <button
              onClick={() => {
                props.history.push({
                  pathname: '/',
                  state: { sourcePage: 'Sub' }
                });
              }}
            >
              Back {props.location.state.sourcePage}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
};

export default Sub;

「myprofile」画面(/profile)の実装です。ボタンクリックにより遷移元ページへの遷移が可能です。

src/MyPforile.js

import React from 'react';

const MyProfile = (props) => {
  return (
    <div>
      <h1>This is my profile</h1>
      <ul>
        {props.location.state && (
          <li>
            <button
              onClick={() => {
                props.history.goBack();
              }}
            >
              Back {props.location.state.sourcePage}
            </button>
          </li>
        )}
      </ul>
    </div>
  );
};

export default MyProfile;

解説すると、遷移元ページのボタンでprops.history.pushを使用することにより、遷移先にパラメータを渡しています。パラメータはstateフィールドに指定します。

<button
  onClick={() => {
    props.history.push({
      pathname: '/sub',
      state: { sourcePage: 'Home' }
    });
  }}
>
  Go to sub page
</button>

遷移先ページでは、props.location.stateを使用して遷移元から渡されたパラメータを参照しています。sourcePageフィールドを見て遷移元のページ名をボタンのテキストに設定しています。またprops.location.stateを使用して画面遷移でページが開かれたかどうかを判定し、戻るボタンの表示を制御しています。

      <ul>
        {props.location.state && (
          <li>
            <button
              onClick={() => {
                props.history.goBack();
              }}
            >
              Back {props.location.state.sourcePage}
            </button>
          </li>
        )}
      </ul>

デモ

「Home page」を開いた場合は、すべてのページをボタンクリックにより相互に行き来できます。my profileページをHome Pageから開いた時とSub Pageから開いた時とで、戻るボタンのテキストが変わっていることが確認できると思います。

「Sub page」を直接開いた場合は、戻るボタンが表示されず、「Sub page」と「my profile」のみ行き来できます。

「my profile」を直接開いた場合も、戻るボタンが表示されず、どのページとも行き来できません。

おわりに

Reactで画面遷移でページを開いた時だけ戻るボタンを表示する実装をしてみました。

戻るボタンの表示を制御したいことはあまり無いかも知れませんが、応用すれば例えば数ページに渡る入力フォームがあり、その途中のページが直接開かれた場合に別ページにリダイレクトさせる、なんていう実装も可能です。

参考

以上