使用React.Lazy的动态延迟加载（16.6.0）

您有 2 3个主要问题：

1. 在这一行：

   var c = <dynamicLoader component={prop.component} />;
   

   用户定义的组件必须大写。因此将其更改为：

   var c = <DynamicLoader component={prop.component} />;
   

   显然，您还需要更改声明：

   function DynamicLoader(props) {
     return (
       <Suspense fallback={<div>Loading...</div>}>
         React.lazy(() => import(`${props.component}`))
       </Suspense>
     );
   }
   

2. 在这条线

   return <Route exact path={prop.path} component={c} key={key} />;  
   

   就像道具名称所component暗示的那样，您需要传递一个组件而不是一个元素，您可以阅读有关DOCS区别的更多信息。

   因此，您需要将其更改为：

   return <Route exact path={prop.path} component={() => c} key={key} />;
   

3. 你是对的。我错过了孩子部分，您正在渲染字符串。您可以创建一个变量并将其呈现为子变量：

   function DynamicLoader(props) {
     const LazyComponent = React.lazy(() => import(`${props.component}`));
     return (
       <Suspense fallback={<div>Loading...</div>}>
         <LazyComponent/>
       </Suspense>
     );
   }