如何从变量或道具导入组件 - 动态路由器

Question

一个好的解决方案的上下文（底部的简短问题）。

我有一个数据库 (API)，它生成 AppA、AppB、AppC 等应用程序的数据列表及其名称、路径...

使用地图，我根据这个数据列表（在主<App/>）和前面生成（反应路由器）到这些应用程序的链接。 使用另一张相同的地图（如下），我制作了应该根据路由和应用名称调用应用的路由器：

function(Router) {
    const [routes, setRoutes] = useState([]);

    useEffect(() => {
        fetch("MyAPI")
            .then(res => res.json())
            .then((result) => {setRoutes(result.results)}

            )
    }, [])

   // The route for each app and after the map, the route to the home with these links
    return (

        <Switch>{ 
            routes.map(result =>
                <Route exact path={"/"+result.route} key={keygen(16)}>
                    <AppCaller name={result.name} id={result.id} path={"/"+result.route}/>
                </Route>

            )}
            <Route exact path="/">
                <App />
            </Route>
        </Switch>

    )
}
export default Router

我的第一个问题是我既不能从 API 中提供像 <result.name/> 这样的组件名称来在路由器中调用此组件，也不能动态导入此组件。 我的第一个解决方案是创建另一个组件<AppCaller/>，并将名称和路径作为 Props 来消除组件问题，如下所示：

import React from "react";
import Window from "./dashComponents"
import subApp from "./Apps/Store"

 class AppCaller extends React.Component {

  render() {
    return (
        <Window name={this.props.name}>
            <subApp/>
        </Window>
    )
  }
}

export default AppCaller

事实上，即使应用不同，我也可以保留<subApp/> 名称。我唯一需要改变的是应用程序来自来自的“哪里”。

简短问题的开始

那么，如何将 import 语句的路径更改为“导入”这个动态组件中的好 App 呢？ （在这种情况下带有道具）

import subApp from this.props.path 

这可能看起来像这样（如果它是静态的）：

App1 文件中的import subApp from "./Apps/App1"

import subApp from "./Apps/App1" 在 App2 文件等中

在 React 文档和 Stack Overflow 中看到的另一个想法是使用延迟导入，但它不起作用：

import React, {Suspense} from "react";
import Window from "./dashComponents"
//import subApp from "./Apps/Store"

    const path = this.props.path
    let name = this.props.name

 function AppCaller() {

    const SubApp = React.lazy(() => import('./Apps/'+name))


    return (
        <Window name={name}>
            <Suspense fallback={<h2>"Chargement..."</h2>}>
                <SubApp/>
            </Suspense>
        </Window>
    )

}

export default AppCaller

或

 class AppCaller extends React.Component {

  render() {

    const SubApp = React.lazy(() => import('./Apps/'+this.props.name));

    return (
        <Window name={this.props.name}>
            <Suspense fallback={"Chargement..."}>
                <SubApp/>
            </Suspense>
        </Window>
    )
  }
}

export default AppCaller

“上述错误发生在您的一个 React 组件中...”

感谢您的帮助。 我尽量做到非常准确，到处找。所以，请在判断之前告诉我精确度。

编辑 1 时出现完整错误

当我点击其中一个生成的链接时出现此错误。

上述错误发生在您的一个 React 组件中： 在未知（由 AppCaller 创建） 在 Suspense 中（由 AppCaller 创建） 在 div 中（由 Window 创建） 在窗口中（由 AppCaller 创建） 在 AppCaller 中（由 RoutesX 创建） 在 Route 中（由 RoutesX 创建） 在 Switch 中（由 RoutesX 创建） 在路线X 在 div 中 在路由器中（由 BrowserRouter 创建） 在浏览器路由器中

考虑在树中添加错误边界以自​​定义错误处理行为。 访问“Facebook”以了解有关错误边界的更多信息。

使用初始错误编辑 2

react-dom.development.js:11865 未捕获的 ChunkLoadError：加载块 0 失败。 （错误：http://dash.localhost:8000/0.main.js） 在 Function.requireEnsure [as e] (http://dash.localhost:8000/static/frontend/main.js:106:26) 在 eval (webpack:///./src/components/AppCaller.js?:45:36) 在 initializeLazyComponentType (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:1432:20) 在 readLazyComponentType (webpack:///./node_modules/react-dom/cjs/react-dom.development.js?:11862:3) ... 要求确保@main.js:106 评估@ AppCaller.js:45 ...

和

0.main.js:1 加载资源失败：服务器响应状态为404（未找到）

Answer 1

大家好！

所以，这不是 React 而是 Webpack 的问题！

当您使用 React 延迟导入特定组件，并使用 npm run dev (or build) “编译”时，webpack 将代码由 Chunck 拆分，但配置文件错误。 这是我的有效配置文件：

module.exports = {
    output: {
    filename: 'App.js',
    publicPath: '/static/frontend/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

我需要将“公共路径”添加到“chunck”脚本的路径中。:)