React-router 1.0.3嵌套路由子空

Question

我正在关注此处的示例

https://github.com/rackt/react-router/tree/master/examples/huge-apps

我将代码移植到我的堆栈中，似乎所有的GlobalNav链接都工作正常，但是当我在课程中转到一些嵌套路由时，this.props.children是未定义的。

这是我到目前为止将代码转换为es6

// MAIN entry for webpack

import React from 'react';
import { Router } from 'react-router';
import { render } from 'react-dom';
import stubbedCourses from './stubs/COURSES';

import App      from './components/App';
import Calendar from './routes/Calendar';
import Course   from './routes/Course';
import Grade    from './routes/Grades';
import Message  from './routes/Messages';
import Profile  from './routes/Profile';

var rootRoute = {
  component: 'div',
  childRoutes: [{
    path: '/',
    component: App,
    childRoutes: [
      Calendar,
      Course  ,
      Grade   ,
      Message ,
      Profile ,
    ]
  }]
};

render(
  <Router routes={rootRoute} />,
  document.getElementById('content')
);

//Course/index.js

import Announcements from './routes/Announcements';
import Assignments   from './routes/Assignments';
import Grades        from './routes/Grades';
import Course        from './components/Course';


module.exports = {
  path: 'course/:courseId',

  getChildRoutes (location, cb) {
    require.ensure([], (require) => {
      cb(null, [
        Announcements,
        Assignments  ,
        Grades
      ])
    })
  },

  getComponent (location, cb) {
    require.ensure([], (require) => {
      cb(null, Course)
    })
  }
};

//Changed Course.js

import React from 'react';
import Dashboard from './Dashboard';
import Nav from './Nav';

var styles = {};

styles.sidebar = {
  float: 'left',
  width: 200,
  padding: 20,
  borderRight: '1px solid #aaa',
  marginRight: 20
};

class Course extends React.Component {
  render () {
    let { children, params } = this.props;
    let course = COURSES[params.courseId];

    return (
      <div>
        <h2>{course.name}</h2>
        <Nav course={course} />
      
        // Props not passed down
        {children && children.sidebar && children.main ? (
      
          <div>
            <div className="Sidebar" style={styles.sidebar}>
              {children.sidebar}
            </div>
            <div className="Main" style={{padding: 20}}>
              {children.main}
            </div>
          </div>
        ) : (
          <Dashboard />
        )}
      </div>
    );
  }
}

export default Course;

当我在调试器中并排运行它们时