不要在新页面加载或刷新时渲染React组件

Do not render React Component on fresh page load or refresh

本文关键字：React 组件 刷新 新页面 加载      更新时间：2023-09-26

我正在寻找一种方法，让React在页面刚加载或刷新时不渲染组件。只有当用户在单页应用程序中从一页浏览到另一页时，该组件才应该呈现。

我试过使用window.document.readyState来检测这个，但它被击中或错过了。

您可以在浏览器中使用会话存储，如

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，但它也将等于当前url并转到// First visit or refresh。

如果用户从网站内的另一个页面访问该页面，则会设置sessionStorage.active，并且它与window.location.href不匹配，因为它当前设置为以前访问过的页面url。因此，它将转到// Render component。

这个解决方案可能有一些怪癖，必须在特殊的用例中解决，但希望你有一个好的起点。

相关文章：