かずきのBlog@hatena

日本マイクロソフトに勤めています。このブログは個人ブログなので、ここに書いている内容は個人的な意見で会社の公式見解ではない点にご注意ください。好きなものは XAML と C# 。苦手なものは型の無い言語です。

ReactRouter + TypeScriptでパラメータを受け取る方法

ルートの定義でdetail/:idみたいにしてたら、idという名前のパラメータを受け取ることが出来ます。受け取り方は以下のような感じで。

ReactRouter.RouteComponentPropsの第二型引数にパラメータの型を指定します。

interface DetailComposerProps extends ReactRouter.RouteComponentProps<{}, { id: number }> {

}

後は、これをプロパティとして使うように指定したコンポーネントで以下のようにして参照できます。

this.props.routeParams.id