React Router

URLでのルーティングを行うコンポーネント

React みたいに途中で分離したっぽい

react-router - ルーティングのコア部分のみ

react-router-dom - HTMLに特化したルーティング

実装Tips

<Router component> と <Router render> の違い

component

毎回 CreateElement される

render

ルーティングが切り替わった一回のみ実行される

なので、

code: jsx

<Route path='/' component={Index} />

は特に問題がないが、

code: jsx

<Route path='/' component={(prop) => <Index {...prop} />} />

みたいにラムダ式を使用するとパフォーマンスに問題がでるので、

code: jsx

<Route path='/' rener={(prop) => <Index {...prop} />} />

componentのPropで怒られる

Warning: Failed prop type: Invalid prop \`component\` of type \`object\` supplied to \`Route\`, expected \`function\`.

素直にFunctional Componentで書くと良さそう