onClickでページ遷移したい時は、history.pushを利用します。
import * as H from 'history' interface OwnProps { history: H.History }
<Route>で指定したコンポーネントであれば上記の型宣言でhistory関数を利用できますが、孫コンポーネントなどの場合は、withRouterをかませる必要があります。
しかし、typescriptを使っている場合、そのままでは型エラーが出ます。
下記がエラーが出る書き方
import { withRouter } from 'react-router' // ここのmapStateToPropsなどを書く... export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ModalComponent))
解決方法
react-routerからRouteComponentPropsをimportし、mapStateToPropsの型として宣言します。
import { withRouter, RouteComponentProps } from 'react-router' interface OwnProps extends RouteComponentProps { // 親コンポーネントから渡ってきたpropsの型 } interface Props extends OwnProps { // コンポーネントに渡す型 } const mapStateToProps = (state: State, ownProps: OwnProps): Props => { return { ...ownProps } }
これでエラーが消え、コンポーネントでhistory関数が利用できます。
this.props.hisotry.push('/home') this.props.hisotry.goBack()
/post/:postId、このpathのpostIdを受け取りたい場合は、RouteComponentPropsの型引数を使います。
interface OwnProps extends RouteComponentProps<{ postId: string }> { // 親コンポーネントから渡ってきたpropsの型 }
これで以下でアクセスできるようになります。
this.props.match.params.postId
フロントエンド開発でお困りのことはありませんか?
フロントエンドの開発支援を行っています。
・Reactの開発をお願いしたい
・コーディング作業を依頼したい
・javascriptライブラリを作って欲しい。
上記以外にも何かありましたらお気軽にお問い合わせください。