react-router动态路由页面渲染不出来

Question

近期在尝试react-router的动态路由功能，但是页面上什么也不显示，控制台也不报错，请教一下是什么原因，下面是主要的代码：

/* App.jsx */
import React, { Component } from 'react';
import { Link } from 'react-router';

export default class App extends Component {
  render() {
    return (<div>
      <Link to="/foo">Foo</Link>
      <Link to="/bar">Bar</Link>
      <div>
        {this.props.children || <span>No Content</span>}
      </div>
    </div>);
  }
}

/* Routes.jsx */
import React from 'react';
import { Router, hashHistory } from 'react-router';

const rootRoute = {
  component: 'div',
  childRoutes: [
    {
      path: '/',
      component: require('./App.jsx'),

      getChildRoutes(location, cb) {
        require.ensure([], (require) => {
          cb(null, [
            require('./routes/Foo.jsx'),
            require('./routes/Bar.jsx')
          ]);
        });
      }
    }
  ]
};

export default function Routes() {
  return <Router history={hashHistory} routes={rootRoute} />;
}

// ...
render(<Routes />, document.getElementById('rootContainer'));

Answer 1

找到问题原因了。。。
因为使用了ES6语法，require的行为发生了变化，需要后面加.default才能引用到导出的模块。
可以添加一个babel插件babel-plugin-add-module-exports，这样就不用处处加.default了。

Answer 2

这是我之前写的，你可以参考下。github-router

Answer 3

加上import ReactDOM from 'react-dom';
以及最后面的render（）改成ReactDOM.render（）；
碰到过这个问题，当时按照官方文档来写的，结果有报错。手机上答的题，没有调试过，希望能帮到你。

Answer 4

确实要.default~~~~你这个插件好像不错~我去试试