react-router: 'Invariant Violation: Ungültiges Tag: {HelloWorld}', während die Komponente genau dort ist

Question

Ich bin neu in React und versuche, mit react-router (v1.0.0) auf den neuesten Stand zu kommen.

Ich habe eine einfache Komponente und eine einfache Route eingerichtet, aber es gibt mir einen Fehler: Invariant Violation: Invalid tag: {HelloWorld}. Sie würden es für einen klaren Fehler halten, aber ich kann nicht herausfinden, was mit dem Code nicht stimmt.

Hier ist sie:

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

var routes = (
    <Router> 
     <Route path="/" component="{HelloWorld}"/> 
    </Router> 
); 

ReactDom.render(routes, document.querySelector('#main')); 

Wenn ich routes mit <HelloWorld /> in der ReactDom.render Anweisung wechseln aus, es funktioniert gut.

Jede Hilfe wird sehr geschätzt!

Answer 1

Wenn Sie an der Dokumentation wieder schauen, sehen Sie, dass component erwartet einen Verweis auf eine Komponente sehen, kein String:

component={HelloWorld} 
//  ^  ^

In JSX -Attributwerten "..." einen String (wie in JavaScript) darstellt und {...} repräsentiert einen beliebigen JavaScript-Ausdruck. Daher ist "{HelloWorld}" sehr verschieden von {HelloWorld}.