this.props.history.pushの使い方について

Question

前提・実現したいこと

ReactとFireBaseを利用して、ログイン認証を行いたいと思っています。
ログインの認証の実装ができたので、ページ遷移の方法をさがして実装してみようと思いましたが、this.props.history.push('遷移先')
の部分のhistoryがpropsに存在しない旨のエラーが帰ってきます。
現状はただログインの認証を行って、ログイン情報が取得出来ればページの遷移を行うという簡単なものを作りたいのですが、
どのサイトを探してもhistoryが存在しないときの対処方法が出てきません。
また、この問題に付随しているのかいないのかは定かではありませんが、最終行のWithRouterでもエラーが起きてしまっています。
※実装練習中のため、ボタンを押すとaboutページに遷移するだけの簡単なものでやっております。

発生している問題・エラーメッセージ

・this.props.history.push('遷移先')部分のエラーメッセージ
プロパティ 'history' は型 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' に存在しません。ts(2339)

・WithRouter()部分のエラーメッセージ
型 'typeof Detail' の引数を型 'ComponentType<RouteComponentProps<any, StaticContext, any>>' のパラメーターに割り当てることはできません。
  型 'typeof Detail' を型 'ComponentClass<RouteComponentProps<any, StaticContext, any>, any>' に割り当てることはできません。
    型 'Detail' を型 'Component<RouteComponentProps<any, StaticContext, any>, any, any>' に割り当てることはできません。
      プロパティ 'props' の型に互換性がありません。
        型 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' を型 'Readonly<{ children?: ReactNode; }> & Readonly<RouteComponentProps<any, StaticContext, any>>' に割り当てることはできません。
          Type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' is missing the following properties from type 'Readonly<RouteComponentProps<any, StaticContext, any>>': history, location, matchts(2345)

該当のソースコード

import * as React from 'react';
import { withRouter } from 'react-router';

class Detail extends React.Component {
handleToAboutPage = () => {
this.props.history.push('/about')
}

render() {
return (
<div>
<button onClick={this.handleToAboutPage}>
aboutページへ
</button>
</div>
)
}
}

export default withRouter(Detail);

React,TypeScript,JavaScript

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

アロー関数ではthisが束縛されないのではないでしょうか。

[alpaka]

上位のコンポーネントでRouterタグを使用していますか？

Answer 1

通常はhistoryが存在すると思いますが、そうでないなら、もらっているコードだけだと判断できないですね。

このへんの情報など参考にならないでしょうか？
https://qiita.com/sand/items/4aec0201befbe1483dc5