typescript+React+ReactRouterでwithRouterの型宣言

typescript+React+ReactRouterでwithRouterの型宣言

LINEで送る
Pocket

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
LINEで送る
Pocket

フロントエンド開発でお困りのことはありませんか?

フロントエンドの開発支援を行っています。

・Reactの開発をお願いしたい

・コーディング作業を依頼したい

・javascriptライブラリを作って欲しい。

上記以外にも何かありましたらお気軽にお問い合わせください。

コメントを残す