BETA

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

投稿日:2018-10-17
最終更新:2018-10-24
※この記事は外部サイト(https://qiita.com/mild_tanama/items/3e108f...)からのクロス投稿です

状況

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に書き直しましたが、そのおかげで気づくことができました。 書くコードにきちんと責任を持って、意味を理解することが重要だなと改めて感じました。。コードに疑問を持つの、大事ですね。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@mildtanama'の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!