预加载列表中给出的组件，然后再加载实际使用它们的组件

问题描述

加载组件（例如Page1）时，我有一个来自API的字符串列表

futureComponents = ["ComponentA","ComponentB"]

ComponentA，ComponentB，ComponentC，ComponentD ...在它们各自的文件中定义。来自API的列表可以具有任意数量的组件，这些组件都在各自的文件中定义，例如可以["ComponentA","ComponentC"]。

我想在仍显示Page1的同时加载（不渲染）所有这些组件。 Page1中有一个按钮，该按钮路由到Page2（这是一个单页应用程序）。在Page2中，代码有点像这样

import ComponentA from "/some/path"
import ComponentB from "/some/path"
import ComponentC from "/some/path"
...

const Page2 = (props)=>{
    const [currentItem] = useSharedState() // custom hook
    
    let componentToRender = null
    // currentItem.type is guaranteed to be one of futureComponents list on Page1
    switch(currentItem.type){
        case "ComponentA":
            componentToRender = <ComponentA/>;
            break;
        case "ComponentB":
            componentToRender = <ComponentB/>;
            break;
        case "ComponentC":
            componentToRender = <ComponentC/>;
            break;
        ...
    }
    return (componentToRender);
}

因此，目标是在Page2上同时预加载Page2上需要的组件，以使其零时间将其加载到Page2上。如果我在Page2上延迟加载，将需要一些时间（将显示）。我也不想加载所有组件（A，B，C，D ...，Z），因为那样会很重。只需加载名称在列表中给出的名称，就需要在呈现Page2之前加载。

我尝试了一种方法，即在给定here的情况下，在Page1中加载必需的组件以使其隐藏。我在想是否有更好的方法。

请帮助谢谢和问候

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lazy-loading react-router reactjs reactjs