如何让 window.location.reload(true) 只重新加载正确的页面？

Question

在我的 React 应用程序中，我的所有页面上都有以下代码，其中两个除外

componentWillMount() {
    setInterval(function() {
        window.location.reload(true);
    }, 300000);
}

但是，代码不在的页面仍然会重新加载，除非我在继续这些页面时刷新它们。为什么会发生这种情况，如何让这些页面在不刷新的情况下不重新加载？

这两个页面的window.location.hash属性是'#/credit-request'和'#/support-ticket'，我也尝试过在页面中添加以下代码，但是得到相同的结果

componentWillMount() {
    if (window.location.hash != '#/credit-request' && window.location.hash != '#/support-ticket') {
        setInterval(function() {
            window.location.reload(true);
        }, 300000);
    }
}

我也尝试在 html 页面中通过在正文标记中添加以下脚本来执行此操作，但仍然得到相同的结果

<script>
    if (location.hash != '#/credit-request' && location.hash != '#/support-ticket') {
        setInterval(function() {
            window.location.reload();
        }, 300000);
    }
</script>

Answer 1

您需要在 unmount 组件之后执行 clearInterval（即转到不同的页面）。如果您不这样做，那么即使您离开组件，setInterval 也会保持运行。

修复

class MyComponent extends React.Component {
  ...
  intervalId = null;
  componentDidMount() {
    this.intervalId = setInterval(() => window.location.reload(true), 30000);
  }

  componentWillUnmount() {
    clearInterval(this.intervalId);
  }
}
...

如何让 window.location.reload(true) 只重新加载正确的页面？

How do I get window.location.reload(true) to only reload the correct page?

window.location

page-refresh

reactjs