React Error - Uncaught Invariant Violation: Der Elementtyp ist ungültig

Question

... erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber erhalten: Objekt.

Hallo, ich versuche gerade meine Hand bei React, ich verfolge ein Tutorial, das veraltet ist, was einige Probleme verursacht. Ich versuche, die Fehler selbst zu korrigieren, während ich fortfahre, aber ich bin gestolpert, während ich versuche, Routen einzurichten, und erhalte diesen Fehler;

Fehlermeldung

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

Der Code der ich Verdächtiger verursacht dies auf meinem app-Client.js Datei, die wie folgt aussieht;

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

Ich vermute nicht, es wird von meiner app.js Datei kommt aber aus Gründen, herauszufinden, was falsch ist, ich habe es enthalten ist;

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; 

Kann mir jemand in Richtung einer Antwort darauf oder irgendwo, dass mehr Informationen über diese zur Verfügung stellen kann.

Answer 1

Es sieht aus wie Sie versuchen, eine <Router/> mit der falschen Sache zu erstellen (die gesamte React-Router-Bibliothek). Versuchen

Router = require('react-router'), 

zu

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

ändern, so können Sie den Router Eigenschaft von React-Router, nicht das gesamte Modul selbst.

Wie für die Fehlermeldung: React erwartet entweder eine Zeichenfolge oder ReactClass (das ist eine Funktion/Es6-Klasse) als erstes Argument an React.createElement() übergeben. JSX ist nur eine Möglichkeit, XML-Style-Markup in den richtigen Satz von React.createElement() für Sie zu verwandeln. Also, wenn Sie versuchen, <Router/> zu erstellen, wird React.createElement (Router) erstellt und das ganze react-router-Objekt wird übergeben, also die Beschwerde :)