关于javascript：React.createElement：类型不能为null或未定义

React.createElement: type should not be null or undefined

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

[HMR] Waiting for update signal from WDS...

ok router

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

ok datawrapper

invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

[WDS] Hot Module Replacement enabled.

我的webpack条目文件app.jsx是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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是：

1
2
3
4
5
6
7
8
9
10
11
12

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是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

import React from 'react';

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

render() {
console.log("ok");
return (

hello world
{JSON.stringify(this.context.data)}

);
}
};

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

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

export default Index;

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

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

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

1
2
3
4
5

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

...

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