路由代码简化问题

[steem]

`如果项目很大，app.router里要写一大堆路由配置项，这部分代码如果能省去不写最好，我在想有没有可能在App里面根据当前的url自动动态加载未加载的component，比如下面的App内的代码，如果children能怎么换成动态加载的component，那就不用提前写router配置项了。

return (
    <div>
      <Helmet>
        <title>ANTD ADMIN</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href={logo} type="image/x-icon" />
        {iconFontJS && <script src={iconFontJS}></script>}
        {iconFontCSS && <link rel="stylesheet" href={iconFontCSS} />}
      </Helmet>
      <div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
        {!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>
          <Sider {...siderProps} />
        </aside> : ''}
        <div className={styles.main}>
          <Header {...headerProps} />
          <Bread {...breadProps} />
          <div className={styles.container}>
            <div className={styles.content}>
              children
            </div>
          </div>
          <Footer />
        </div>
      </div>
    </div>
  )

[marswong]

• 不写配置，路由和组件之间怎么确立映射关系？
• 实现 children 根据 url 来响应式加载组件，使用 dva.connect 就可以在当前路由组件的 props 挂载上一个 children，这个 this.props.children 会帮你处理路由的映射关系，所以你还是离不开路由的配置

[wuchangming]

@steem ，可以试下webpack的require.context

写过一个关于路由管理的文章： https://github.com/wuchangming/blog/blob/master/docs/webpack/require-context-usage.md

[steem]

@wuchangming 这样是可以，不过好像带来的问题是所有js文件都打包到一个bundle里了。

[wuchangming]

@steem， 可以对路由对应的component加载做分块。react-router 的 getComponent

[steem]

@wuchangming 明白了，可以这么做，感谢！不过跟我的预想稍微有点差别。

[huangguozhen]

@steem react-router4 Just Component 的概念应该是你想要的方案。