React Router 刷新时空白屏幕

Question

我有一个使用 create-react-app 的单页应用程序，它是通过 Firebase 托管部署的。刷新在我的 / 主页路线上有效，但是当我在 /product-details 路线上并刷新它时 returns 一个空白屏幕。这只发生在手机上。对于桌面浏览器，它工作得很好。

为什么我只在移动设备上看到这个而不是桌面设备？

一些注意事项：

只发生在移动设备上（Chrome 和 Safari 浏览器）。适用于桌面
我已将所有网址重写为 index.html
控制台中没有控制台错误。
控制台警告说 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
使用 react-router ^5.1.2 和 react-router-dom ^5.1.2

我的路线是这样的：

                <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

这不是我的路线设置方式的问题。这是我用来保存 sessionStorage 状态的事件监听器。我使用的是 beforeunload，它在移动浏览器上不可用，并解释了为什么刷新仅在桌面上有效。我将其替换为 unload.

更多相关信息：

React Router 刷新时空白屏幕

React Router Blank Screen on Refresh

reactjs

firebase-hosting

react-router

create-react-app

react-router-v4