React-使用浏览器后退按钮时页面不显示 [英] React - Page doesn't display when using the browser back button

问题描述

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

I have looked through a lot of related topics and have so far been unable to resolve my problem with my MERN app.

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

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

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

If, for example, you are going to : https://www.website.org/royalty-free-music/cinematic/page-1, try to go to another website and click to the go back button in your browser, the page doesn't display...

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

---

页面没有问题:

It only happend when you exit the website, go to another one and coming back with the go back button.... it doesn't happend when you stay on the website.

---

There is no problem with the pages:

https://www.website.org/how-to-use-我们的音乐或者 https://www.website.org/license-agreement ...

仅发生在这样的页面上:

It only happend for the pages like this :

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/公司/第2页

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

I think it might be related to the state in client/src/components/tracks/Tracks.js but I don't know what to fix....

在此先感谢您的帮助(:

Thank you in advance for you help (:

推荐答案

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

This probably comes from a browser cache problem. It's a single page app using React, so you need to always go through the front app index.html. For this you correctly serve index.html on a wildcard route /* declared after your other routes, and you also use some middleware (history fallback). But as you declared the same route on the client and the server: /royalty-free-music/all/page-1 the browser may look in the cache for the response and use the one provided by the server (JSON data) instead of the one corresponding to the front application.

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

You may solve this problem in two ways:

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

• obviously, change the server URL, or maybe prefix it with api. It would be semantically more correct (IMO) as server and front-end routes do not serve the same purpose (you are not dealing with server side rendering here)
• disable cache on the server route by using res.set('Cache-Control', 'no-store, no-cache, must-revalidate, private') in your route.

这篇关于React-使用浏览器后退按钮时页面不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！