ブログ

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