使用react-loadable延迟加载组件的动态路径导入

我正在使用 create-react-app 创建一个应用程序，并使用 React-loadable 延迟加载组件。

我想要做的是导入加载器对象或react-loadble模块的Loadable函数的动态路径。

Code:

const LoadableComponent = path =>
 Loadable({
  loader: () => import(`${path}`),
  loading: Loader,
 })

const Home = LoadableComponent('./../../pages/Home')
const User = LoadableComponent('./../../pages/User')

如果我将路径字符串放在路径变量的位置（例如 import('./pages/Home')）并调用它可以工作的函数。但是当我像上面的代码一样使用它时，Loader 会加载，但不会再继续加载组件。为什么我在导入中使用变量不起作用？

找到了答案here https://stackoverflow.com/questions/47954655/dynamic-imports-in-es6-with-runtime-variables

“为了让 Webpack 处理导入，它至少需要能够大致猜测 import() 所要引用的内容。”

事实证明你的路径不能太匿名。猜猜它堆得太深了，Webpack 无法自信地知道我正在导入什么。