I have been using React JS in my projects for quite some time now and am used to managing routing in my app using the react-router package. I have always been keen on having as little dependencies in my apps as possible, so, I always felt perturbed by the use of this particular package in simpler apps which did not have complex routes. Recently, while working on a project I decided to use a custom solution to handle the routing, using the Context API and hooks. I will go on to describe the solution with some code samples.

In another post, I will describe how I integrated the above mentioned solution with Firebase (Firebase Authentication).

First we need to create a navigation provider , the navigate method will be used to navigate from one route to the other from within the routes.

We first create a context using

React.createContext()

Then, we create a provider, NavigationProvider, with the help of the context we just created. The render function returns a Provider encompassing it’s children.

#react-hook #javascript-development #javascript #react #reactjs