前提・実現したいこと
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー