悬念不是在呈现反应之后加载内容。

Question

我使用的是reactjs的code-splitting延迟加载概念。但是<Suspense>似乎对我不起作用，因为它没有向我展示回退、加载消息和直接在它的渲染中加载代码。

我正在本地开发环境中运行react应用程序，而不使用它的生产版本。下面是我正在使用的代码。

import React,{ lazy, Suspense } from 'react';

class Homepage extends React.Component{
render(){
   return(
     <div>
       <Suspense fallback={<h2>Products are loading...</h2>}>
          // products display code
       </Suspense>
     </div>
   );
}

下面是沙箱链接：https://codesandbox.io/s/hardcore-bouman-egx93

Answer 1

您需要在您的App.js文件中延迟导入您的主页组件(在这里您进行路由)，并像这样导入您的产品组件；

App.js

import React, { lazy, Suspense } from 'react'
import { BrowserRouter, Switch, Route } from 'react-router-dom'

const HomePage = lazy(() => import('./pages/home/HomePage'))

class App extends React.Component {

  render() {
    return (
       <BrowserRouter>
          <Switch>
            <Suspense fallback={<h2>Loading...</h2>}>
              <Route exact path='/' component={HomePage}/>
            </Suspense>
          </Switch>
       </BrowserRouter>
      )
  }

}
export default App

延迟加载产品组件，setTimeout to 0,1000只用于调试。

HomePage.js

import React, { lazy, Suspense } from 'react'

const Products = React.lazy(() => {
  return new Promise(resolve => setTimeout(resolve, 1000)).then(
    () => import(".../components/products/Products")
  );
});


export default function HomePage() {
  return (
    <div>
      <Suspense fallback={<h2>Products are loading...</h2>}>
        <Products />
      </Suspense>
    </div>
  );
}