React: react-router and dynamic page title

I have been learning React for the past few weeks, and I am loving it. I spent today learning react-router at After going through it and implementing a lot of it in my app, I realized that it did not cover one thing that I really need: dynamic page title.

I have googled and looked at different examples of how others have done it (e.g. react-document-title, document.title) but I finally decided to tinker on my own and see if I can come up with my own implementation. (I know… another one???)

My sample code will be added to the result of lesson 3 from the tutorial I linked above:



Looking at index.js, I thought why not add a title attribute on the Route nodes directly? That would be the most convenient location, in my mind.


We added it to routing, but how will App get its value? This part is easy.


That’s it.