当用户在加载的页面（NextJS、ReactJS）之间导航时，加载指示器不显示答案

【问题标题】：Loading indicator is not displaying when user navigates between loaded pages (NextJS, ReactJS)当用户在加载的页面（NextJS、ReactJS）之间导航时，加载指示器不显示
【发布时间】：2020-05-01 19:39:45
【问题描述】：

我需要什么：

当用户在页面之间导航时，我想显示一个加载指示器。我看到了一个例子https://github.com/zeit/next.js/tree/canary/examples/with-loading，它对我有用。在我的应用程序中，我实现了类似的逻辑。对于作为加载指示器的实验，我只需更改标签的颜色。

try {
  if (isLoading) {
    document.getElementsByTagName('body')[0].style.backgroundColor = 'red'
    console.log('RED')
  }
  else {
    document.getElementsByTagName('body')[0].style.backgroundColor = 'green'
    console.log('GREEN')
  }
}
catch (err) {
}

我使用这样的事件：

Router.events.on('routeChangeStart', url => {
  setIsLoading(true)
})
Router.events.on('routeChangeComplete', () => setIsLoading(false))
Router.events.on('routeChangeError', () => setIsLoading(false))

会发生什么：

在第一次，当页面还没有构建并且没有从服务器加载，并且用户导航到它时，颜色会改变并且一切都很好。但是之后，当用户返回到已经加载的页面时，body 的颜色并没有更新。

这段代码在任何情况下都会执行，因为我看到了console.log，但是颜色没有变化。

有趣的事情 #1 - 如果我在更改颜色的行之前放置“调试器”，那么它会在该行停止并更新颜色，即使对于已经加载的页面也是如此。根据我的需要。

有趣的事情 #2 - 如果我将使用 setTimeout 进行绿色着色，那么对于已经加载的页面，在重定向期间背景将保持绿色。重定向完成后变为红色，超时后再次变为绿色。

我使用：

nextjs 9.1.7
反应 16.12.0
也是redux，不过我觉得不重要。

在执行到已加载页面的导航时，浏览器似乎没有更新 DOM。谁能给我一个建议，对于已经加载的页面，当用户进行导航时我无法更新 DOM 的原因是什么？

【问题讨论】：

请添加密码笔。这将有助于我们更好地了解您的问题。谢谢。
我不知道该放什么。如果我创建一个空示例，其中只有 nextjs、react 和上面的代码，它就可以工作，就像在官方示例中一样 github.com/zeit/next.js/tree/canary/examples/with-loading 我的项目有问题。当然，我不能在 codepen 上发布它。我需要一些建议 - 哪里可能有问题，我会知道在哪里挖掘。

标签： javascript reactjs next.js

【解决方案1】：

我找到了问题的原因。

它是如何工作的：

实际上，当页面已经被nextjs渲染加载后，路由器会在用户导航后立即渲染。

问题发生的原因：

在我的示例中，我有两个页面。它们包含大量数据（其中一个特别重）。用户导航到已经加载的页面后，浏览器立即开始渲染，耗时约 2 秒。由于浏览器中的渲染正在进行中，因此无法渲染加载指示器。并且在渲染完成后，触发了“routeChangeComplete”事件，并且在页面加载后加载指示器立即消失。

做什么：

更正确地重构页面并使其呈现更快。那么我们就不需要渲染的加载指示器了。
下一个解决方法可能是 - 当您想要进行重定向时，您需要先呈现加载指示器。只有在此之后，才开始重定向并因此呈现页面。最简单的方法，只是为了测试它是使用 setTimeout 来延迟重定向。但我不推荐这种方式。

附：沙盒中的一个示例运行良好，因为那里的页面非常轻量级，并且通过不阻塞渲染的 setTimeout 模拟了长时间加载。

【讨论】：