React - 使用浏览器后退按钮时页面不显示

Question

我浏览了很多相关主题，但到目前为止无法解决我的 MERN 应用程序问题。

当我尝试转到另一个网站并使用浏览器后退按钮时，有些页面没有显示。

相反，我只能看到我的 json 文件/API 响应... 我需要刷新页面才能正确显示。

例如，如果您要：https://www.website.org/royalty-free-music/cinematic/page-1，请尝试转到另一个网站并单击浏览器中的返回按钮，页面不会显示...

只有当您退出该网站，转到另一个网站并使用返回按钮返回时才会发生....当您留在网站上时不会发生。

---

页面没有问题:

https://www.website.org/how-to-use-our-music 要么 https://www.website.org/license-agreement ...

它只发生在这样的页面上:

https://website.com/royalty-free-music/:category/page-:page

例如：

https://www.website.org/royalty-free-music/all/page-1 要么 https://www.website.org/royalty-free-music/corporate/page-2

---

我认为它可能 与 client/src/components/tracks/Tracks.js 中的状态 有关，但我不知道要解决什么....

---

提前感谢您的帮助(:

Answer 1

这可能是浏览器缓存问题造成的。这是一个使用 React 的单页应用程序，因此您需要始终通过前端应用程序 index.html。为此，您在其他路由之后声明的 wildcard route /* 上正确地提供了 index.html，并且您还使用了一些中间件（历史回退）。 但是当您在客户端 和 服务器上声明相同的路由时： /royalty-free-music/all/page-1 浏览器可能会在缓存中查找响应并使用服务器提供的响应（JSON data) 而不是前面应用对应的那个。

您可以通过两种方式解决这个问题：

• 显然，更改服务器 URL，或者在其前面加上 api。它在语义上更正确（IMO），因为服务器和 front-end 路由不用于相同的目的（您在这里不处理服务器端渲染）
• 通过在您的路由中使用 res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private') 禁用服务器路由上的缓存。