reactでナビバーに現在のページに該当する場合はクラスを付与して色を変えたいです。

Question

reactでナビバーに現在のページに該当する場合はcssのクラスを付与して色を変えたいです。
routerは
react-router-dom
を使っています。

通常、どの様にするのでしょうか？

Answer 1

こちらにサンプルコードがあります。

https://reacttraining.com/react-router/web/example/custom-link

サンプルのとおりですが、
Routeコンポーネントのエレメントとして指定するコンポーネントにはmatch propsがあるので
それを利用することでclassの付与はできます。