This issue bothered me for a while and I did not like any of the solutions I found on the web and then the light turned on in my head!
React now offers us React Hooks, The 7th World Wonder of modern web development. How does this solve our problem?
We can write a custom hook that will trigger every time we render one of our pages. Assuming you already have your React app running go ahead and create a folder for your custom hook and a file called useRedirectToHttps.js
Inside of useRedirectToHttps.js we will create a hook called
useRedirectToHttps and invoke a
useEffect() on every render.