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

#React

若槻龍太

2022.02.12

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

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

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

JavaScriptのHistory.pushState()メソッドの動作を確認してみた | DevelopersIO

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

実装

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

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」への遷移と、遷移元ページへの遷移が可能です。

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）の実装です。ボタンクリックにより遷移元ページへの遷移が可能です。

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>