React路由器4 - 路由代码拆分，使用webpack 1.9

我正在尝试升级一个2年前的反应代码库，以使用最新的react和react-router . 我根本没有触及webpack配置，我假设我不需要 . 我是反应世界的新手，所以请耐心等待 . 我有几个问题可以捆绑到这个问题中，所以它会相当长 .

• 捆绑：

webpack配置将js文件作为入口点加载 .

var entry = { appBundle : ["./src/index.js"] }

在index.js中，我们正在做类似的事情：

var mainRoutes = {
    component: "div",
    childRoutes: [
    {
       path: "/",
       component: require("./components/LandingPage.jsx"),
       childRoutes: [
            require("./components/dashboard"),
            ..
            ..
       ]
    }
}

然后，

React.render(
   React.createElement(Router, { history: browserHistory, routes: mainRoutes }),
   document.getElementById("app-container")
 );

我保持入口点相同，但我已将index.js的内容更改为：

ReactDOM.render((
   <BrowserRouter>
     <LandingPage />
   </BrowserRouter>
 ), document.getElementById("app-container"));

在LandingPage.jsx中，我已经定义了所有顶级路由，如下所示：

render() {
    return (     
      <main>
        <Switch>
          <Route path='/dashboard' component={Dashboard}/>
           ..
        </Switch>
      </main>
     );
  }

路由工作正常，一切正常 . 但我看到的区别是webpack用于发出如下内容：

Asset              Size                 Chunks           Chunk Names
                                            14 
    appBundle.js       xxx kB               0                appBundle
    dashboard.js       xxx kB               1                dashboard

.. and so on for most components

但现在它在：

Asset              Size                 Chunks           Chunk Names
                                        1 
appBundle.js       xxx kB               0                appBundle

所以 Q1: am I missing some configurations for creating the bundles as before?

• getComponents

在我们的每个组件文件夹中，我们都有一个index.js文件，其内容如下：

"use strict";

 module.exports = {
   path: "dashboard",

   getComponents(location, cb) {
     require.ensure([], (require) => {
       cb(null, require("./Dashboard.jsx"));
     }, "dashboard");
   }
 };

我知道在反应路由器v4中不再支持getComponents . 这段代码是否异步加载组件（并创建了不同的bundle？）？

Q2: What should replace getComponents and index.js files?

• 嵌套路线

React router 4不支持嵌套路由，我应该在需要嵌套路由的地方添加组件 . 但我不确定在哪里 . 说，我们的组件看起来像这样：

"use strict";

 // import stuff
 class DashboardContainer extends React.Component {
   render() {
     return (
       <Dashboard {...this.props} />
     );
   }
 }

 class Dashboard extends React.Component {     
   render() {
     return (
       <div></div>
       <SomeOtherComponent/>
     );
   }
 }

 export default DashboardContainer;

我将其更改为（所有其他代码相同）

class Dashboard extends React.Component {     
       render() {
         return (
           <div>
               <div></div>
               <SomeOtherComponent/>
               <Route path='/childComponent' component={ChildComponent}/>
           </div>
         );
       }
     }

但子组件不呈现 .

Q3: Where do I need to define the child/nested component route?

如果需要更多信息，请告诉我 . 谢谢 .