Reactjs React路由器4动态组件从数据库动态加载

我正在从2.5.1迁移到React路由器4.11在旧版本中，我的同构/通用应用程序在启动时从数据库中动态检索路由/组件，我希望保留与4.11相同的功能。

在react router的2.5.1版本中，我能够通过调用_createRouter从数据库中动态加载路由和组件，路由参数是从我的数据库中检索到的数据，如下所示：

////////////////////////
// from client entry.js
////////////////////////
async function main() {
  const result = await _createRouter(routes)
  ReactDOM.render(      
      <Provider store={store} key="provider">
        <Router history={history}>
          {result}
        </Router>
      </Provider>
    dest
 );
}

//////////////////////
// from shared modules
//////////////////////
function _createRouter(routes) {
     const childRoutes = [ // static routes, ie Home, ForgotPassword, etc];

      ////////////////////////
      // crucial part here
      ////////////////////////
      routes.map(route => {
        const currComponent = require('../../client/components/' + route.route + '.js');
        const obj = {
          path: route.route,
          component: currComponent
        };
        childRoutes.push(obj)
      });

      childRoutes.push({path: '*', component: NotFoundComponent});
      return { path: '', component: .APP, childRoutes: childRoutes };
    }

////////////////////////
//从client entry.js
////////////////////////
异步函数main（）{
const result=wait_createRouter（路由）
ReactDOM.render（
{result}
目的地
);
}
//////////////////////
//来自共享模块
//////////////////////
功能_createRouter（路由）{
const childRoutes=[//静态路由，即Home、ForgotPassword等]；
////////////////////////
//这里的关键部分
////////////////////////
routes.map（route=>{
const currComponent=require（'../../client/components/'+route.route+'.js'）；
常量对象={
路径：route.route，
组件：currComponent
};
儿童路线推送（obj）
});
push（{path:'*'，component:NotFoundComponent}）；
返回{路径：''，组件：。应用程序，childRoutes:childRoutes}；
}

在4.11中，我找不到任何关于执行相同事件的文档，对此我感到沮丧。每个示例都显示了硬编码的路线，如下所示：

render() {
    return (
          <Route path='/' component={Home} />
          <Route path='/home' component={About} />
          <Route path='/topics' component={Topics} />
   )
}

render（）{
返回(
)
}

这在我看来并不真实，尤其是对于大型应用程序

是否有人能为我指出实现2.5.1和4.11中相同成功的方向，即能够动态地从数据库动态加载我的路由/组件

---

多谢

在新版本中，每条路线只是一个常规的反应组件。因此，您应该能够像创建任何其他组件一样动态创建路由

render() {
  const { routes } = this.props;

  return (
    <div>
      {
        routes.map(route => <Route path={route.path} component={route.component} />)
      }
    </div>
  );
}

render（）{
const{routes}=this.props；
返回(
{
routes.map（route=>）
}
);
}

---

在尝试渲染路由之前，您还需要动态导入组件。

也许此代码就是解决此问题的方法。“动态路由导入组件”

import-React{
组成部分
}从“反应”；
const Containers=（）=>（
Containers
）；
类ComponentFactory扩展组件{constructor（props）{super（props）；this.state={RouteComponent:Containers}
组件willmount（）{
const name=this.props.page；
导入（'../pages/'+name+'/index'）。然后（RouteComponent=>{
返回此.setState({
RouteComponent:RouteComponent.default
})
}).catch（err=>console.log（'加载组件失败'，err））
}
render（）{
const{RouteComponent}=this.state；
返回（）；
}
}
导出默认组件工厂
}/>

有动态导入的示例吗？我尝试在组件属性中嵌入require语句，但这种方法不正确。

import React, {
    Component
} from "react";

const Containers = () => ( < div className = "containers" > Containers < /div>);

class ComponentFactory extends Component{constructor(props){super(props);this.state={RouteComponent:Containers}}
    componentWillMount() {
        const name = this.props.page;
        import ('../pages/' + name + '/index').then(RouteComponent => {
            return this.setState({
                RouteComponent: RouteComponent.default
            })
        }).catch(err => console.log('Failed to load Component', err))
    }
    render() {
        const {RouteComponent } = this.state;
        return (<RouteComponent { ...this.props  }/> );
    }
}
export default ComponentFactory



 <Route path="/:page"
        render={rest => <ComponentFactory
        page={rest.match.params.page}
        {...rest}/>}/>