不要在新页面加载或刷新时呈现React组件

Question

如果页面刚刚加载或刷新，我正在寻找让React不呈现组件的方法。仅当用户在单页面应用程序中从一页到另一页进行浏览时，才应呈现该组件。

我已尝试使用window.document.readyState来检测此信息，但已被击中或未命中。

Answer 1

您可以像这样在浏览器中使用会话存储

if(!sessionStorage.active || sessionStorage.active == window.location.href) {
    // First visit or refresh
} else {
    // Render component
}
sessionStorage.active = window.location.href;

当用户首次访问该网页时，系统不会设置sessionStorage.active，而是会转到// First visit or refresh。

如果用户刷新页面，则会设置sessionStorage.active，但它也会与当前网址相同，然后转到// First visit or refresh。

如果用户从网站中的其他网页访问该网页，则会设置sessionStorage.active，但它不会与window.location.href匹配，因为它当前已设置为之前访问过的网页网址。因此，它将转到// Render component。

对于特殊用例，这个解决方案可能有一些问题需要解决，但希望你有一个很好的起点。