需要 ReactRouter 后出现 React JS 错误 - 警告：React.createElement：类型不应为 null、未定义、布尔值或数字答案

【问题标题】：React JS Error after requiring ReactRouter - Warning: React.createElement: type should not be null, undefined, boolean, or number需要 ReactRouter 后出现 React JS 错误 - 警告：React.createElement：类型不应为 null、未定义、布尔值或数字
【发布时间】：2016-04-28 10:03:11
【问题描述】：

我目前正在尝试学习 ReactJS，所有不同的教程都使用 ES5 / ES6 以及 React 版本的所有其他差异，至少可以说有点令人沮丧。谁能明白为什么下面的代码会向控制台抛出以下错误？

错误信息：

警告：React.createElement：类型不应为 null、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）

Uncaught Invariant Violation：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：对象。

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Navigation } from 'react-router'


/* 
    Main App layout
*/

var App = React.createClass ({
    render: function () {
        return (
            <div className="catch-of-the-day">
                <div className="menu">
                    <Header tagline="Seafood and Eat it!"/>
                </div>
                <Order/>
                <Inventory/>
            </div>
        )
    }
});


/*  Header */

var Header = React.createClass ({
    render: function() {
        return (
            <header className="top">
                <h1>Catch 
                <span className="ofThe">
                    <span className="of">of</span>
                    <span className="the">the</span>
                </span>
                  day</h1>
                <h3><span>{this.props.tagline}</span></h3>
            </header>
        )
    }
});

/*  Order */

var Order = React.createClass ({
    render: function() {
        return (
            <p>Order</p>
        )
    }
});

/*  <Inventory/> */

var Inventory = React.createClass ({
    render: function() {
        return (
            <p>Inventory</p>
        )
    }
});


/* 
    Store Picker
    This will let us make <StorePicker/>
*/

var StorePicker = React.createClass ({
    render: function () {
        return (
            <form className="store-selector">
                <h2>Please enter a store</h2>
                <input type="text" ref="storeId" />
                <input type="submit" />
            </form>
        )
    }
});

/* 
    Routes
*/

var Routes = (
    <Router>
        <Route path="/" component={StorePicker} />
        <Route path="/store/:storeid" component={App} />
    </Router>
)

ReactDOM.render(<Routes/>, document.querySelector('#main'));

【问题讨论】：

标签： reactjs

【解决方案1】：

试试这个：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Navigation } from 'react-router'


ReactDOM.render(
    <Router>
        <Route path="/" component={StorePicker} />
        <Route path="/store/:storeid" component={App} />
    </Router>, 
    document.querySelector('#main'));

【讨论】：

很好，所以问题实际上出在我的组件上？
是的。我认为问题出在：component={StorePicker}。你不应该使用引号。

【解决方案2】：

您向我们展示的代码不包括您如何导入组件 StorePicker 和 App，但我可以通过写作告诉您

component="{App}"

你将一个字符串作为参数传递给 Route 组件，要传递你的组件，你应该这样写：

<Route path="/store/:storeid" component={App} />

希望对您有所帮助！

【讨论】：

感谢您的帮助，我已经添加了我的组件代码。我还从我的路线中删除了“”（很好发现）。不幸的是，我仍然收到同样的错误。

【解决方案3】：

好的，问题出在我的路由器组件上，我实际上并没有正确渲染它，下面是正确的代码：

/* 路线 */

var Routes = React.createClass({ 渲染：函数（）{ 返回（ ); } });

ReactDOM.render(, document.querySelector('#main'));

【讨论】：