如何在同一时间懒惰加载多个组件

我有2个组件,我想用懒惰加载的方式加载所有组件,例如

const A = lazy(() => import("../test/A")); 
const B = lazy(() => import("../test/B")); 

这将创建2个独立的捆绑包,并在需要时导入它们。

但是。我想创建一个单一的包 而当该绑定加载时,我应该能够使用上述两个组件。

我也不想创建一个包含上述两个组件的单一组件,因为我想为这两个组件创建一个单独的路径。

我曾试着做过这样的事https:/codesandbox.ioseager-raman-mdqzc?file=srcApp.js。

请谁能给我解释一下,这种类型的功能是可能的,如果是,那么如何,我做错了什么?

解决方案:

你可以使用Suspense来等待它们两个。有两个bundles,但你可以等待加载它们两个。

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

const Home = lazy(() => import('./routes/Home'));
const About = lazy(() => import('./routes/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/about" component={About}/>
      </Switch>
    </Suspense>
  </Router>
);

给TA打赏
共{{data.count}}人
人已打赏
未分类

CSS动画关键帧计算

2022-9-13 15:57:36

未分类

Oracle:"(+) "在WHERE子句中的作用是什么?

2022-9-13 15:57:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索