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

IT技术 reactjs back mern
2021-05-01 05:00:28

我已经浏览了很多相关主题，但到目前为止，我的 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但我不知道要解决什么问题....

预先感谢您的帮助（：

1个回答

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

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

  • 显然，更改服务器 URL，或者用api. 它在语义上更正确（IMO），因为服务器和前端路由的目的不同（您在这里不处理服务器端渲染）
  • 通过res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private')在您的路由中使用禁用服务器路由上的缓存。
其它你可能感兴趣的问题
上一篇如何在 ListView 上显示 json 数据通过 post 请求 api react-native 下一篇Framer Motion 和 React 路由器 5：如何防止使用嵌套路由重新渲染父组件？