react-router: "Violazione invariata: tag non valido: {HelloWorld}", mentre il componente è proprio lì

Question

Sono nuovo di React e sto provando ad aggiornarmi con react-router (v1.0.0).

Ho installato un componente semplice e un percorso semplice, ma mi sta dando un errore: Invariant Violation: Invalid tag: {HelloWorld}. Si potrebbe pensare che sia un errore chiaro, ma non riesco a capire cosa c'è di sbagliato nel codice.

Eccolo:

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

Se posso passare fuori routes con <HelloWorld /> nella dichiarazione ReactDom.render, funziona benissimo.

Qualsiasi aiuto è molto apprezzato!

Answer 1

Se si guarda la documentazione ancora una volta, vedrete che component si aspetta un riferimento a un componente, non è una stringa:

component={HelloWorld} 
//  ^  ^

In JSX valori degli attributi, "..." rappresenta una stringa (come in JavaScript) e {...} rappresenta un'espressione JavaScript arbitraria. Quindi "{HelloWorld}" è molto diverso da {HelloWorld}.