如何使用反應組件創建模塊並使用反應延遲加載？

Question

我曾嘗試在反應惰性中加載模塊，但它是未定義的組件。

我的模塊文件 products/index.js

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

export default [Categories,Brands];

在路由器文件中我試過這樣，

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

但，

console.log(products[0]) // undefined
console.log(products[1]) // undefined

模塊文件有問題嗎？ 以及如何通過反應懶惰和懸念來實現這一目標？

Answer 1

像這樣嘗試

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

Answer 2

我得到了一個解決方案，我在 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}/>);     
}

在 Router.js 中

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

然后像這樣使用，

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

所以它工作正常。