Reactjs 使用react loadable加载页面的错误方式

我使用React+React Router+在下载页面的所有内容之前添加预加载页面。 这是我的密码：

AppLoader.js：

import Loadable from 'react-loadable';
import Loading from './preLoader';
import React from 'react';

const LoadableComponent = Loadable({
  loader: () => import('./App'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

import React from 'react';
import classes from '../../styles/main/preload.less';

let opacityInterval;

export default class PreLoadPage extends React.Component{
    render(){
        return(
            <div className={classes.rootTag}>
                Loading...
            </div>
        );
    }
}

从“react Loadable”导入可加载；
从“/预加载程序”导入加载；
从“React”导入React；
常量LoadableComponent=可加载({
加载程序：（）=>导入（'./App'），
加载：加载，
});
导出默认类App扩展React.Component{
render（）{
返回；
}
}

preload.js：

import Loadable from 'react-loadable';
import Loading from './preLoader';
import React from 'react';

const LoadableComponent = Loadable({
  loader: () => import('./App'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }
}

import React from 'react';
import classes from '../../styles/main/preload.less';

let opacityInterval;

export default class PreLoadPage extends React.Component{
    render(){
        return(
            <div className={classes.rootTag}>
                Loading...
            </div>
        );
    }
}

从“React”导入React；
从“../../styles/main/preload.less”导入类；
让不透明的间隔；
导出默认类PreLoadPage扩展React.Component{
render（）{
返回(
加载。。。
);
}
}

我想显示加载页面，直到应用程序页面完全就绪。所有的图片和其他东西都被下载了。也许这是我的问题 服务器将提供给响应的内容。我正在使用django rest框架作为后端

我如何告诉加载程序等待页面完全呈现然后消失

或者也许是：

---

加载所有内容（包括图像）后，我如何告诉react完成安装组件？

就在提出此问题时，

react

发布了16.6.0版，其中包括。此外，还提供了一个组件来渲染

回退

，或加载组件/动画

在呈现延迟加载的组件之前，将等待从服务器检索到所有内容（文件/块/资源）：

const App = React.lazy(() => import('./App'))
const AppWrapper = () => {
  return (
    <Suspense fallback={<Loading />}>
      <App />
    </Suspense>
  );
};

const-App=React.lazy（（）=>import（'./App'））
常量AppWrapper=（）=>{
返回(
建议从开始。这将把你的应用程序分割成逻辑块。一旦你对代码分割更为熟悉，其他有意义分割代码的地方就会变得更加明显