【React】子コンポーネントでhistory.pushを使用する方法

タイトル通り、React 環境でページ遷移機能である、history.push を使用する方法です。
React Router を使用すれば、ページ遷移機能が簡単に実装できるのですが、子要素では history.push を使用することができません。
this.props.history.push('[遷移先]'); と記述しても、エラーになってしまします。
なお、前ページに戻るための history.goBack() でも同様です。

今回は、現在開発中のサービスで、戻るボタンのついたヘッダーが共通だったので、子コンポーネントとしてそれを定義していたのですが、上述のとおり、history.goBack() が、子コンポーネントでは使用できないので、どうしたものかと悩んでいました。
が、解決策が見つかったのでご紹介。

なお、今回参考にさせていただいた記事はこちらから。

[フロントエンド] React Routerで、子要素でもhistory.pushを使いたい（withRouterの利用） – YoheiM.NET
https://www.yoheim.net/blog.php?q=20180412

さて、その対処法ですが、React-Router の withRouter を使用します。
具体的には下記のとおりです。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { withRouter } from 'react-router';

class Header extends Component { 
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  }
  render() {
    return (
      <div id='header'>
        <a className='back' onClick={() => this.props.history.goBack()}>戻る</a>
        <h1>タイトル</h1>
      </div>
    );
  }
}
export default withRouter(Header)

3行目で、withRouter をインポートし、最終行で、その withRouter で Header コンポーネントを囲っています。
6～10行目で、propTypes の定義を追加しており、これにより、14行目で this.props.history.goBack(); の呼び出しが可能になっています。

子コンポーネントで前ページに戻る機能が実装できるととても便利ですね！
これを知る前は、かなり無理矢理で動かしていたので、とてもスッキリしました。

以上、子コンポーネントで history.push や history.goBack を使用する方法でした。
ご参考にしていただければ幸いです。