如何在Reactjs中禁用后退/前进缓存？

Question

我正在尝试弃用我的'react'应用程序中的cache，但当它加载时不执行任何javascript代码。

我希望在单击'react'应用程序时，所有JS代码将运行，并且将加载no-cache。

• 我希望有人可以帮助我，提前感谢！

- Alejandro Gabriel

---

欢迎来到StackOverflow，请花点时间阅读并用MRE提问，祝好运。 - nima

请告诉我这是否解决了你的问题，@Alejandro Gabriel。 - Gonzalo Roque Cugiani

Answer 1

我只是进行了编辑以便理解，但或许我能提供帮助。我认为有一种有效的方法可以禁用 back/forward cache 并防止页面内容（如 html、css、javascript、images 等）被后退前进缓存所服务，使用的方法是通过 Cache-Control HTTP header。

可以检查您的 web 服务器，在您的页面或 HTML 文档的响应头中发送此信息，基于 MDN Web Docs cache-control。

HTTP 1.1 允许的值为 PUBLIC | PRIVATE | NO-CACHE | NO-STORE。

<meta http-equiv="Cache-control" content="no-cache">

不需要将所有资产（css，images，scripts等）发送，这会防止它们正常缓存，因为想法只是避免浏览器的 back/forward cache ，也许这就是你的问题。

• 另一个选择可能是使用带有空事件侦听器的'unload'或'beforeunload'事件，如果您的问题涉及 DOM ，则此信息也可能有所帮助'window.onunload.onbeforeunload'。

- Gonzalo Roque Cugiani

Answer 2

在React中，您需要通过使用以下内容来特别处理缓存：

Hooks --> useMemo() 和 useCallback()

可能缓存是在浏览器中发生的。例如，如果您使用的是chrome。

• 尝试使用DevTools检查页面
• 单击刷新按钮
• 单击清空缓存并强制重新加载

如果这些方法都不起作用，需要更多帮助，请发布您认为正在缓存的代码部分。

- justin107d

---

很遗憾，这对我正在遇到的问题没有帮助 :c - Alejandro Gabriel

你确定 JavaScript 文件已经通过 script 或 link 标签正确地引入到文件中了吗？ - justin107d