刷新时反应路由器黑屏答案

【问题标题】：React Router Blank Screen on Refresh刷新时反应路由器黑屏
【发布时间】：2019-12-27 19:44:30
【问题描述】：

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

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

注意几点：

仅在移动设备上发生（Chrome 和 Safari 浏览器）。适用于桌面
我已设置为将所有 url 重写为 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>

【问题讨论】：

标签： reactjs react-router create-react-app react-router-v4 firebase-hosting

【解决方案1】：

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

更多信息在这里：Session Storage not being retrieved on mobile browser

【讨论】：