Javascript 如何使用react组件创建模块并使用react lazy加载？

我曾尝试在react lazy中加载模块，但它是未定义的组件

我的模块文件products/index.js

import Categories from './Category/Categories';
import Brands from './Brand/Brands';   

export default [Categories,Brands];

在路由器文件中，我试过这样做

const products = React.lazy(() => import('./views/products'));

但是,

模块文件中有问题吗？那么如何通过反应懒惰和悬念来实现这一点呢？

试着这样做

React.lazy(() => import('./views/products').then(module => ({ default: module.Categories}));

---

我得到了一个解决方案，我更新了index.js和Router.js文件

在products/index.js文件中

import Categories from './Category/Categories';
import Brands from './Brand/Brands';   

export const modules={Categories : Categories,Brands : Brands};

export default ProductModule = ({ component, path, isPrivate, ...rest }) =>{ 
   let RouteComponent=modules[component];   
   return (<Route path={path} component={RouteComponent}  {...rest}/>);     
}

然后像这样用这个,

  <ProductModule path='/product/brands' component="Brands"/>

---

所以它工作得很好。

这是CRA关于React Lazy和Suspend的文档。您是否在惰性加载组件周围提供了一个Suspend标签？是的，我使用了Suspend标签这不起作用。模块导出中是否需要更改？

 const ProductModule = React.lazy(() => import('./views/products'));

  <ProductModule path='/product/brands' component="Brands"/>