反应错误 - 未捕获的不变违规：元素类型无效

Question

...期待一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：对象。

您好，我目前正在尝试使用 React，我正在学习一个过时的教程，这会导致一些问题。我正在尝试自己修改错误，但是我在尝试设置路线时偶然发现并收到此错误；

错误信息

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

我怀疑导致此问题的代码位于我的 app-client.js 文件中，如下所示；

app-client.js

var React = require('react'),
Router = require('react-router'),
ReactDOM = require('react-dom'),
Route = Router.Route,
DefaultRoute = Router.DefaultRoute,
App = require('./components/App'),
Audience = require('./components/audience').default,
Speaker = require('./components/speaker'),
Board = require('./components/board'),
routes;

routes = (
    <Route handler = {App}>
        <DefaultRoute handler={Audience} />
        <Route path="speaker" handler={Speaker}></Route>
        <Route path="board" handler={Board}></Route>
    </Route>
);

ReactDOM.render(<Router>{routes}</Router>, document.getElementById('react-container'));

我不怀疑它来自我的 app.js 文件，但为了找出问题所在，我将其包含在内；

App.js

var React = require('react'),
Router = require('react-router'),
RouteHandler = Router.RouteHandler,
io = require('socket.io-client'),
Header = require('./parts/header.js'),
App;

App = React.createClass({

    getInitialState() {
        return {
            status: 'disconnected',
            title: ''
        }
    },

    componentWillMount() {
        this.socket = io('http://localhost:5432/');
        this.socket.on('connect', this.connect);
        this.socket.on('disconnect', this.disconnect);
        this.socket.on('welcome', this.welcome);
    },

    connect() {
        this.setState({ status: 'connected' });
    },

    disconnect() {
        this.setState({ status: 'disconnect'});
    },

    welcome(serverState) {
        this.setState({ title: serverState.title });
    },

    render() {
        return (
            <div>
                <Header title={this.state.title} status={this.state.status} />
                <RouteHandler />
            </div>
        );
    }
});

module.exports = App;

有人可以指出答案的方向或可以提供更多信息的地方吗？

Answer 1

看起来您正在尝试使用错误的东西（整个 react-router 库）创建 <Router/>。尝试改变

Router = require('react-router'),

到

Router = require('react-router').Router

所以你可以使用路由器属性来自 React-router，而不是整个模块本身。

至于错误消息：React 期望将字符串或 ReactClass（它是一个函数/es6 类）作为第一个参数传递给 React.createElement()。 JSX 只是一种将 xml 样式标记转换为适合您的 React.createElement() 集合的方法。因此，当您尝试创建 <Router/> 时，正在创建 React.createElement(Router) 并且整个 react-router 对象被传入，因此投诉:)