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 https://github.com/reactjs/react-router-tutorial. 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:

App.js:

index.js:

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.

index.js:

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

App.jsx:

That’s it.

3 Replies to “React: react-router and dynamic page title”

Leave a Reply

Your email address will not be published. Required fields are marked *