浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React】React Routerで直前のページに戻るボタンを実装する

ちょっとしたことですが、コピペできると便利だろうなぁと思い、まとめ。
React Router で戻るボタンを実装する方法です。

参考にした記事はこちら。

React Routerのhistoryはどこから来るのか|TECHSCORE BLOG
http://www.techscore.com/blog/2017/12/01/where_does_react-router-history_come_from/

React 及び React Router の導入方法については割愛。
おそらく、Qiita あたりにわかりやすい記事があると思うので、そちらを参考にしてください。

 

実装方法…というか、前ページへ戻るための処理は下記の通りです。

this.props.history.goBack()

ページ遷移の時は、this.props.history.push('[遷移先]'); ですが、前のページに戻る時は最後が goBack() になります。
わかりやすいですね!

で、戻るボタン実装の際は、下記の通りです。

<button onClick={() => this.props.history.goBack()}>戻る</button>

よく、onClick に処理を書く際、最初の () => を書き忘れそうになるので、まるっとコピーできるように…。
…上記のコードはそのままコピー&ペーストで動くかと思いますので、是非ご活用ください

 

以上、React Router で戻るボタンを実装する方法でした。

  • この記事いいね! (3)