React.createElement：type不能为null或未定义

Question

这是浏览器日志中显示的内容：

[HMR]等待来自WDS的更新信号...

好的路由器

警告：React.createElement：type不能为null，undefined，boolean或number。 它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。

好的数据包装器

invariant.js：38未捕获的不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

[WDS]启用热模块更换。

我的webpack入口文件app.jsx是：

import React from "react";
import Router from "react-router";
import ReactDOM from "react-dom";
import createBrowserHistory from 'history/lib/createBrowserHistory';

import router from "./router/router";
import DataWrapper from './container/DataWrapper';

if (process.env.BROWSER && process.env.NODE_ENV === 'development') {
  require('../../public/css/app.css');
}

let history = createBrowserHistory();
let data = JSON.parse(document.querySelector('#data').innerHTML);
ReactDOM.render(<DataWrapper data={data}><Router history = {history}>{router}</Router></DataWrapper>, document.querySelector('#app'));

DataWrapper.jsx是：

import React from 'react';

 class DataWrapper extends React.Component {
    constructor(props) {
        super(props);
    }

    getChildContext() {
        return {
            data: this.props.data
        };
    }

    render() {
        console.log("ok datawrapper");
        return this.props.children;
    }
}
DataWrapper.childContextTypes = {
    data: React.PropTypes.object.isRequired
};

export default DataWrapper;

router.jsx是：

import React from "react";
import {Route, IndexRedirect} from "react-router";

import Index from '../components/Index'

console.log("ok router");

export default(
  <Route path='/' component={Index}>

  </Route>
);

而Index.jsx是：

import React from 'react';

class Index extends React.Component {
  constructor(props, context) {
    super(props, context);
  }

  render() {
    console.log("ok");
    return (
      <div style={{height: '100%'}}>
        hello world
        <div style={{display: 'none'}} id="data">{JSON.stringify(this.context.data)}</div>
      </div>
    );
  }
};

Index.propTypes = {
  location: React.PropTypes.object
};

Index.contextTypes = {
  data: React.PropTypes.object.isRequired
};

export default Index;

该警告似乎并未影响服务器渲染。 console.log("ok")在服务器中工作。

Answer 1

最后，我找出了由react-router不推荐使用的方法引起的问题。

在react-router 2.0使用Router和history的正确方法是：

import {Router, browserHistory} from "react-router";

...

ReactDOM.render(<DataWrapper data={data}><Router history={browserHistory}>{router}</Router></DataWrapper>, document.querySelector('#app'));