Suspense 在渲染 reactjs 后不加载内容

Question

我正在使用 code-splitting reactjs 的延迟加载概念。但是 <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>
   );
}

这里是沙箱link：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

懒加载Products组件，setTimeout为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>
  );
}

Suspense 在渲染 reactjs 后不加载内容

Suspense is not loading content after render reactjs

lazy-loading

reactjs