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

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/>这样的组件名称来调用路由器中的该组件，也不能动态导入该组件。我的第一个解决方案是创建另一个名称和路径为Props的组件<AppCaller/>，以消除如下组件问题：

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 subApp from this.props.path 

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

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

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

React文档和Stack Overflow中的另一个想法是使用Lazy Import，但它不起作用：

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创建(处于挂起状态(由AppCaller创建(在div中(由Window创建(在窗口中(由AppCaller创建(在AppCaller中(由RoutesX创建(在路由中(由RoutesX创建(在交换机中(由RoutesX创建(在RoutesX中在div中在路由器中(由BrowserRouter创建(浏览器中的路由器

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

用初始错误编辑2

react dom.development.js:11865 Uncaught ChunkLoadError:加载区块0失败。(错误：http://dash.localhost:8000/0.main.js)在Function.require确保[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)。。。[e-mail]:[e-mail]:45…

和

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

Answer 1

大家好！

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

当您使用React惰性导入特定组件时；编译"；使用npm run dev (or build)webpack通过Chunk拆分代码，但配置文件错误。这是我的配置文件，它可以工作：

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

我需要添加"；公共路径"；到"；chunck的脚本。：(