※この記事は外部サイト(https://qiita.com/mild_tanama/items/3e108f...)からのクロス投稿です
状況
React Routerを使い、pathの: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に書き直しましたが、そのおかげで気づくことができました。 書くコードにきちんと責任を持って、意味を理解することが重要だなと改めて感じました。。コードに疑問を持つの、大事ですね。
技術ブログをはじめよう
Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
.qrunch.io
メールアドレスで登録する
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく
0件のコメント