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'));