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
