react-router-domの<Route>に関してまとめる

syunto07ka commented 4 years ago

react-router-domに関してまとめる

主にpropsのcomponentとchildren の違いについてまとめる

syunto07ka commented 4 years ago

component

簡単にまとめると

pathと一致した場合に表示されるよ
componentに値を渡すと、React.createElementでcomponentが作成されるので、ただコンポーネントをupdateしたいときだけでも、既存のコンポーネントは捨てられ新しいコンポーネントが作成されてしまうため、良くない(<-ここ曖昧)。
なので、inline関数(これが何を指しているか曖昧。今渡しているfunctional componentもそう？)を使いたいのであれば、childrenかrenderに渡しましょう

syunto07ka commented 4 years ago

piro0919 commented 4 years ago

@syunto07ka

ちょっと難しかったですかね？結論から書いてしまうと、単純にchildrenで渡してしまって良いはずです。 children(function)ではないのが注意です！

Routeコンポーネントに子コンポーネントを渡す方法は、4つあるみたいですね。

renderについてはdeprecatedしているのでここでは触れません。

componentで渡す場合は、全てのroute propsが子コンポーネントに渡されます。 (https://reacttraining.com/react-router/web/api/Route/component)

children(function)の場合は、componentで対応しきれない場合に使うっぽいですね。これは始めて知りました、が、childrenと明示的に書く書き方はどーなんですかね？

childrenの場合はroute propsが渡されないです。そのため、子コンポーネントがclass構文の場合route propsに依存しない書き方だとパフォーマンスが良かったわけですね。

ところが、hooksの導入によりわざわざroute propsを介して子コンポーネントを呼び出す必要がなくなったため、全てchildrenによる呼び出し方で十分、というのが自分の認識です。これとかわかりやすいですね。

なので今回の場合はこの書き方で十分ですね。