使用 Next.js 为每个页面单独加载动画

Question

我希望我的每个页面在加载时都有不同的加载动画。我怎样才能做到这一点？

不可能像这样将加载组件放在页面组件上：

//Page component
Page.Loader = SomeLoaderComponent

//_app.tsx
const Loader = Component.Loader || DefaultLoader;

这将不起作用，因为“组件（页面）”尚未加载/渲染。

我也试过用next.js动态导入，这样我就可以根据url导入正确的页面，然后得到正确的loader。我最初的计划是将 Loader 添加到页面组件中，如上面代码的第一行所示。这不起作用，因为我必须给出明确的路径。

const getLoader = (pagePath: string): ComponentType => {
  const Loader = dynamic(() => import(pagePath));
  return Page.Loader;
};

这在 Next.js 文档中有说明：

所以问题是：如何为每页获取自定义加载器？

Answer 1

你可以使用 Suspense 和 Lazy 来完成你的任务。

假设你有 ComponentA.js 如下

const ComponentA = () => {
   return <div>Helloooo</div>
}

您可以创建另一个组件 WrapperA.js 文件

import React, { Suspense } from 'react';

const WrapperA = React.lazy(() => import('./ComponentA'));

function WrapperA() {
   return (
     <div>
      <Suspense fallback={<div>Loading...</div>}>
         <ComponentA />
      </Suspense>
    </div>
  );
}

在<div>Loading...</div> 的位置，您可以拥有任何您喜欢的加载器组件。并根据需要将 WrapperA 导出到您的路线或选项卡。