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

Question

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

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

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

您可以通过以下方法查看网站的当前版本，以了解发生了什么： https://www.joystock.org

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

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

---

页面没有问题：

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

仅发生在这样的页面上：

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

例如：

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

---

这是我当前的git repos：https://github.com/Karaza/joystock

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

---

在此先感谢您的帮助（：

Answer 1

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

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

• 很明显，更改服务器URL，或者为它加上api前缀。从语义上讲，这是更正确的（IMO），因为服务器和前端路由的作用不相同（此处您不处理服务器端渲染）
通过在路径中使用res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private')
• 在服务器路径上禁用缓存。