状況

React Routerを使い、pathの:id部分を取り出したかった。

React Router v4で任意のid情報を送る方法

上記記事を見たらprops.matchに入っているとのことで簡単だ！と思ってpropsにmatchがあるか確認したらなかった…。

原因

componentを利用していないのが原因だった。routerでpropsを渡したかったので、renderを使っていた。

react-router v4にてchild componentにpropsを渡す方法

コード

<Route
    exact path = '/'
    render = {() => 
        <SampleComponent 
            data = { data }
        />}
/>

propsを渡したかったので上記の書き方をしていた。

<Route
    exact path = '/'
    component = { SampleComponent }
/>

componentにしたらきちんとprops.matchが渡るようになった！ 渡したかったpropsはreact-reduxでなんとかしました。（もともとreactで実装してからreact-reduxを入れる、みたいな学習をしていただけなので…）

感想

react-redux化した後にpropsを渡す処理が必要じゃなくなったのでrenderである必要がなくなりcomponentに書き直しましたが、そのおかげで気づくことができました。 書くコードにきちんと責任を持って、意味を理解することが重要だなと改めて感じました。。コードに疑問を持つの、大事ですね。