从地址栏重新加载 URL 后，Firefox 中的 React Router 导航问题答案

【问题标题】：React Router navigation issue in Firefox after reloading URL from address bar从地址栏重新加载 URL 后，Firefox 中的 React Router 导航问题
【发布时间】：2020-06-01 09:03:24
【问题描述】：

我在使用 React 16.12 和 React Router 4.3.1 的 SPA 中遇到导航问题，该问题仅发生在 Firefox 浏览器中。

例如，从 URL /recommendedProducts 开始，我导航到 URL /forms。如果我通过在地址栏中按 enter 重新加载 /forms 页面，然后立即按浏览器后退按钮，则 URL 将更改为 /recommendedProducts 但它不会刷新。调查和比较 Firefox 和 Chrome 之间的行为我注意到在 Firefox 中没有触发 popstate 事件。

路线如下：

<Switch>
    <Route path="/recommendedProducts" component={RecommendedProducts} />
...
    <Route path="/forms" component={Forms} />
</Switch>

如果不是以这种方式重新加载 /forms 页面，而是按 F5 一切正常，浏览器后退按钮将按预期工作。

为什么 Firefox 不触发 popstate 事件，如何通知 React Router 刷新页面？

编辑： 我刚刚发现了这个 React Router 问题，这正是问题所在： https://github.com/ReactTraining/react-router/issues/837

【问题讨论】：

标签： react-router react-router-v4

【解决方案1】：

问题似乎与 Firefox 缓存有关。如https://github.com/ReactTraining/react-router/issues/837 所示，定义卸载事件处理程序将禁用它。

这里是官方文档： https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching

以前我也尝试通过从那里刷新页面来使用 pageshow 和 pagehide 事件，但它们并不总是被触发。

【讨论】：