Reactjs 刷新时反应路由器空白屏幕

我有一个使用create react应用程序的单页应用程序，该应用程序与Firebase主机一起部署。刷新在我的

/

主页路径上起作用，但当我在

/product details

路径上进行刷新时，它会返回一个空白屏幕。这只发生在手机上。对于桌面浏览器来说，它工作得很好

为什么我只能在手机上看到，而不能在桌面上看到？

有几点值得注意：

仅在移动设备上发生（Chrome和Safari浏览器）。致力于 桌面

我已经设置好将所有URL重写为index.html

控制台中没有控制台错误

控制台警告显示

与位于的跨站点资源关联的cookiehttp://google.com/ 设置时没有

SameSite

属性。如果Chrome的未来版本设置为

SameSite=None

和

Secure

，则只能提供带有跨站点请求的cookie。您可以在“应用程序”>“存储”>“cookies”下的“开发人员工具”中查看cookies，并在

使用

react路由器^5.1.2

和

react路由器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>

{shouldShowNav&&}
{！正在加载(
{！userProfile.isAdmin&&(
)}
{userProfile.isAdmin&&(
)}
) : (
加载。。。
)}

这与我的路线设置方式无关。这是一个事件侦听器，我使用它在

会话存储中保存状态。我在卸载之前使用了
，
，这在移动浏览器上是不可用的，这解释了为什么刷新只能在桌面上工作。我将其替换为
卸载

更多信息请点击此处：