Reactjs NextJS：如何为生产构建添加屏幕加载？

我想在下一个js项目中添加屏幕加载。我试着用

next/Router

中的路由器组件来实现这一点

这是next.js项目中的my_app.js：

从'react cookie'导入{CookiesProvider}；
从“下一个/应用程序”导入应用程序
从“React”导入React
从“react redux”导入{Provider}
从“下一个redux包装器”导入withRedux
从“下一个redux saga”导入WithRedux saga
从“../src/redux/store”导入createStore
从“下一个/路由器”导入路由器；
从“./src/util/Utils”导入{Loaded，Loading}；
类MyApp扩展了应用程序{
静态异步getInitialProps（{Component，ctx}）{
让pageProps={}；
if（Component.getInitialProps）{
pageProps=等待组件。getInitialProps（{ctx}）
}
返回{pageProps}
}
render（）{
Router.onRouteChangeStart=（）=>{
加载（）
};
Router.onRouteChangeComplete=（）=>{
加载（）
};
Router.onRouteChangeError=（）=>{
加载（）
};
const{Component，pageProps，store}=this.props；
返回(
)
}
}
使用Redux导出默认值（createStore）（使用ReduxSaga（MyApp））

这是

load（）

和

load（）

函数：

export const load=（）=>{
设置超时（（）=>{
let loading=‘has loading’；
document.body.classList.remove（加载）；
}, 100);
};
导出常量加载=（）=>{
let loading=‘has loading’；
document.body.classList.add（加载）；
};

当项目处于开发模式时，代码运行良好。但当项目建成时，负载不会消失

---

您知道这个问题的解决方案吗？或者您正在建议另一个解决方案吗？

使用

apollo client

和

react hooks

您可以执行以下操作

例如：

import { useQuery } from '@apollo/react-hooks';
import gql from 'graphql-tag';

import { withApollo } from '../lib/apollo';
import UserCard from '../components/UserCard';

export const USER_INFO_QUERY = gql`
  query getUser ($login: String!) {
    user(login: $login) {
      name
      bio
      avatarUrl
      url
    }
  }
`;

const Index = () => {
  const { query } = useRouter();
  const { login = 'default' } = query;
  const { loading, error, data } = useQuery(USER_INFO_QUERY, {
    variables: { login },
  });

  if (loading) return 'Loading...';            // Loading component
  if (error) return `Error! ${error.message}`; // Error component

  const { user } = data;

  return (
    <UserCard
      float
      href={user.url}
      headerImg="example.jpg"
      avatarImg={user.avatarUrl}
      name={user.name}
      bio={user.bio}
    />
  );
};

export default withApollo({ ssr: true })(Index);

从'@apollo/react hooks'导入{useQuery}；
从“graphql标签”导入gql；
从“../lib/apollo”导入{withApollo}；
从“../components/UserCard”导入用户卡；
导出常量用户信息查询=gql`
query getUser（$login:String！）{
用户（登录：$login）{
名称
生物
阿瓦塔鲁尔
网址
}
}
`;
常数索引=（）=>{
const{query}=useRouter（）；
const{login='default'}=query；
const{loading，error，data}=useQuery（用户信息查询{
变量：{login}，
});
如果（正在加载）返回“正在加载…”；//正在加载组件
if（error）返回`error！${error.message}`；//错误组件
const{user}=数据；
返回(
);
};
使用Apollo（{ssr:true}）（索引）导出默认值；

---

这里有更多信息：

我向包装器组件添加了以下代码，问题得到了解决

componentDidMount（）{
加载（）；
}
组件将卸载（）{
加载（）；
}