React
react-router

React Routerでprops.matchが取得できなかった


状況

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に書き直しましたが、そのおかげで気づくことができました。

書くコードにきちんと責任を持って、意味を理解することが重要だなと改めて感じました。。コードに疑問を持つの、大事ですね。