Update react component state on every route change in Docusaurus
Let’s say you are building a documentation website using Docusaurus. There is some requirement that needs you to update the state or trigger to change the state of a react component that resides on every page of docs.
Quite a simple problem, huh!
We will try to find a solution in this article.
A bit about Docusaurus
Docusaurus is a framework that is all in one solution if you want to have website + docs + blog
in one place. You can make beautiful documentation (docs only) websites also.
What do I particularly like about Docusaurus is its versioning feature. Just drop your project-related markdown
files in the right folder for a particular version and you are done. It’s a cool way of doing versioning
Coming to the point, since our goal is to update the state of a react component on every route change, how do we do it?
Before that some information for you to know:
Docusaurus provides onRouteUpdate
life cycle API and we can use it for our own purpose.
Docusaurus’s onRouteUpdate
API
onRouteUpdate
API is the lifecycle API. It is triggered on every route change. It gives access…