Reactjs 使用getComponent的嵌套路由不渲染

我一直在使用

React路由器
3.x设置构建React应用程序，如下所示：


装载路线（'Home'，cb）}/>
加载路径（'AppHome'，cb）}
/>
加载路径（'Search'，cb）}
/>

在
App
中对容器进行分块时，我发现这一点非常有效。
loadRoute
函数包装了一个
System.import
调用adding
containers/${name}/index.js

但是，将动态
getComponent={loadRoute（…）}
添加到
App
并导航到
/App
会导致
全局
没有子项；下载了
App
和
AppHome
的JS区块，但未装载任何内容

loadRoute
功能：

const loadRoute = (container, callback) => {
    return System
        .import(`containers/${container}/index.js`)
        .then(module => callback(null, module.default))
        .catch(errorLoading);
};

对于任何看到这个问题并处于相同位置的人。我几个月前解决了这个问题

我使用了
component
而不是
getComponent
，并向它传递了一个组件，该组件负责异步加载块，显示加载微调器并在可用时进行渲染。该方案也将解决这一问题

现在，分块路由可以嵌套很多层，允许在
react router
3.x中进行真正的代码拆分

components/AsyncComponent.js

从“React”导入React；
const defaultLoadingElement=加载微调器。。。；
常量asyncComp=（getComponent，loadingElement=defaultLoadingElement）=>{
返回类AsyncComponent扩展了React.Component{
静态组件=空；
状态={Component:AsyncComponent.Component}；
组件willmount（）{
如果（！this.state.Component）{
getComponent（）。然后（组件=>{
AsyncComponent.Component=组件；
this.setState（{Component}）；
});
}
}
render（）{
const{Component}=this.state；
if（组件）{
返回；
}
返回加载元件；
}
};
};
导出默认异步comp；

routes.js

从“React”导入React；
从“react router”导入{IndexRoute，Route}；
从“组件/AsyncComponent”导入asyncComp；
const loadRoute=container=>asyncComp（（）=>
导入（`containers/${container}/index.js`）
.then（module=>module.default）
);
常量错误加载=错误=>{
常量错误=新错误（）；
log（error.stack，err.stack）；
抛出新错误（`动态页面加载失败：${err}`）；
};
导出默认存储=>{
返回(
);
};
出于好奇，为什么不直接使用component={component}？你从中得到了什么好处getComponent@KornholioBeavis这意味着用户不必在一个JS文件中加载整个应用程序，它会以这种方式被拆分为多个文件。因为
System.import
是一个承诺-您应该首先加载组件，然后
。然后
-
renderRoute
，检查此处的实现@elmeister我已将我的loadRoute函数添加到问题中，它使用
。然后
。这是因为承诺没有像
react样板文件中该文件的第24行那样链接在一起吗？