React Router Blank Screen on Refresh

Question

I have a single page app using create-react-app that is deployed with Firebase hosting. Refreshing works on my home page route of / but when I'm on the /product-details route and refresh it returns a blank screen. This is only happening on mobile. For desktop browsers it works just fine.

Why am I only seeing this on mobile and not desktop?

A few things of note:

1. Only happens on mobile (Chrome and Safari browsers). Works on Desktop
2. I have it set up to rewrite all urls to index.html
3. No console errors in console.
4. Console warning says A cookie associated with a cross-site resource at http://google.com/ was set without theSameSiteattribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set withSameSite=NoneandSecure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at
5. Using react-router ^5.1.2 and react-router-dom ^5.1.2

This is what my routes look like:

                <BrowserRouter>
                    {shouldShowNav && <SideNav />}
                    {!isLoading ? (
                        <div
                            className={containerClassName}>
                            <Route exact path='/login' component={LoginPage} />
                            {!userProfile.isAdmin && (
                                <PrivateRoute
                                    exact
                                    path='/'
                                    component={VendorDashboard}
                                    isLoggedIn={isAuthenticated}></PrivateRoute>
                            )}
                            {userProfile.isAdmin && (
                                <PrivateRoute
                                    exact
                                    path='/'
                                    component={ProductManagementPage}
                                    isLoggedIn={isAuthenticated}
                                />
                            )}
                            <PrivateRoute
                                exact
                                path='/new-vendor'
                                component={NewVendor}
                                isLoggedIn={isAuthenticated}
                            />
                            <PrivateRoute
                                exact
                                path='/product-details'
                                component={ProductEditor}
                                isLoggedIn={isAuthenticated}
                            />
                        </div>
                    ) : (
                        <div> Loading ... </div>
                    )}
                </BrowserRouter>

Answer 1

This wasn't an issue with how my routes were set up. It was an event listener I was using to save the state in sessionStorage. I was using beforeunload, which wasn't available on mobile browsers and explains why refresh worked on Desktop only. I replaced this with unload.

More on this here: Session Storage not being retrieved on mobile browser