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

Question

我需要什么：

我想在用户在页面之间导航时显示加载指示器。我看到了一个示例 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))

发生了什么：

第一次，当页面尚未构建且未从服务器加载时，用户导航到该页面时，颜色已更改，一切正常。但是之后，当用户返回到已经加载的页面时，正文的颜色不会更新。

这段代码无论如何都会执行，因为我看到了console.log，但是颜色没有变化。

有趣的事情 #1 - 如果我在更改颜色的行之前放置 'debugger'，那么它会在该行停止并更新颜色，即使对于已经加载的页面也是如此。正合我意。

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

我用：

nextjs 9.1.7
反应 16.12.0
还有redux，不过我觉得不重要

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

Answer 1

我找到了问题的原因。

它是如何工作的：

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

为什么会出现问题：

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

要做什么：

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

P.S。沙箱中的一个示例运行良好，因为那里的页面非常轻巧，并且通过不阻止渲染的 setTimeout 模拟了长时间加载。

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

Loading indicator is not displaying when user navigates between loaded pages (NextJS, ReactJS)

javascript

reactjs

next.js