Question

我有一个使用create-react-app的单页应用程序，该应用程序与Firebase托管一起部署。刷新适用于我的/主页路由，但是当我处于/product-details路由并刷新时，它将返回一个空白屏幕。这仅在移动设备上发生。对于桌面浏览器来说，它工作得很好。

为什么我只能在移动设备而不是台式机上看到它？

一些注意事项：

仅在移动设备（Chrome和Safari浏览器）上发生。工作于台式机
我已将其设置为将所有网址重写为index.html
控制台中没有控制台错误。
控制台警告说A cookie associated with a cross-site resource at http://google.com/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite = None and安全. 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。

此处的更多信息：Session Storage not being retrieved on mobile browser

刷新时反应路由器黑屏

1 个答案: