Link 使用 getInitialProps 单击页面不会卸载当前组件或显示加载

Question

我有第 1 页 link 到第 2 页：

const Page1 = () => {
  return <Link href='Page2'><a>Page2</a></Link>
}

当我单击 Link 时，Page1 不会卸载，直到 Page2.getInitialProps 获取完整的加载数据并 return 它。

const Page2 = ({ init }) => {
  return <div>{JSON.stringify(init)</div>
}

Page2.getInitialProps = async () => {
  const init = await fetch('smth')

  return { init }
}

问题是用户感到困惑，在按下 Link 按钮后，有一两秒钟没有任何反应。对于客户端导航，我希望有一种方法可以在按下 link 或至少卸载当前组件后显示一些正在加载的组件。几乎我所有的页面都有 getInitialProps，所以我希望有一些通用的方法来做到这一点，而不是手动的。

我的_app.js:

function MyApp({ Component, pageProps }) {
  return (
      <ThemeContextProvider>
          <Header />
          <Component {...pageProps} />
          <Footer />
      </ThemeContextProvider>
  )
}

export default MyApp

Answer 1

你可以关注this example.
基本上你可以使用 custom app 来覆盖和控制默认页面初始化并显示你的加载动画

Link 使用 getInitialProps 单击页面不会卸载当前组件或显示加载

Link click to page with getInitialProps doesn't unmount current component or show loading

next.js