用react-router做按需加载时无法显示页面，对应的js文件可以返回

Question

做按需加载时可以取到需要加载的js文件，却无法显示页面是怎么回事呀？
以下是我的router代码。

{
            path: '/test.htm',
            getComponents: (location, cb) => {
                require.ensure([], (require) => {
                    cb(null, require('./Test/components/Test'));
                })
            }
}

但是如果我按下面这种写法做，页面就能显示出来(但是就不是那种按需加载了) 。

import Test from './Test/components/Test'
{
            path: '/goodsDetail.htm',
            getComponents: (location, cb) => {
                require.ensure([], (require) => {
                    cb(null, require(Test)
                })
            }
}

我的Test.js是下面这样的（render方法不执行）。

import React from 'react'

const Test = React.createClass({
    render() {
        return (
            <h1>Test</h1>
        )
    }
});

export default Test;

求大神帮忙看一看是怎么回事呀。

Answer 1

我本想写一个完整的demo来回答这个问题，但我也被你的问题卡住了。

export default 和 module.exports 处理起来是不同的

如果你是以前者的写法，父组件里边需要写成{props.default}，才能显示出子组件。
后者才以{props.children}的方式加载。

---

我怎么发现这个问题的？
在render里打个断点，看看props里边都有些什么！

Answer 2

https://github.com/erikras/react-redux-universal-hot-example/issues/814