Using React Router in Home Screen PWA
In an app I’ve been working on recently I’m using React Router with HTML5 History API. The app is a Progressive Web App and it turns out that History API routing does not work when app is launched from home screen.
It took me a bit of time to figure out why my app works in Chrome Mobile, but doesn’t work when launched from home screen. To work around this issue I’ve decided to use hash router when app is launched from home screen and history router when app is running in browser.
The recommended way to check if app is running in home screen is to use media queries.
So in my app instead of always using
<BrowserRouter> I now use
pass history object as a prop to it.
This way the app uses hash router only when launched from home screen.