Update react component state on every route change in Docusaurus

Amrish Kushwaha
3 min readJun 16, 2021

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.

Pics which contains code
A picture that contains code

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…

--

--

Amrish Kushwaha

Engineer & Writer | Writes about Tech, Productivity, Building Product and Success