この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
こんにちは、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で画面遷移でページを開いた時だけ戻るボタンを表示する実装をしてみました。
戻るボタンの表示を制御したいことはあまり無いかも知れませんが、応用すれば例えば数ページに渡る入力フォームがあり、その途中のページが直接開かれた場合に別ページにリダイレクトさせる、なんていう実装も可能です。
参考
- 【React】React Routerで直前のページに戻るボタンを実装する – 株式会社シーポイントラボ | 浜松のシステム・RTK-GNSS開発
- 【React-Router】history.pushで遷移先のページにデータを渡す方法 – 株式会社シーポイントラボ | 浜松のシステム・RTK-GNSS開発
以上