Response-router: "Invariant Violation: Invalid tag: {HelloWorld}" while the component is right there

Question

I am new to React and trying to speed up with response-router (v1.0.0).

I installed a simple component and a simple route, but it gave me an error: Invariant Violation: Invalid tag: {HelloWorld} . You think this is a clear mistake, but I can’t understand what is wrong with the code.

Here he is:

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

If I disable routes with <HelloWorld /> in the ReactDom.render , it works fine.

Any help is much appreciated!

Answer 1

If you look at the documentation again, you will see that component expects a link to the component, not to a string:

 component={HelloWorld} // ^ ^ 

In JSX attribute values, "..." represents a string (as in JavaScript), and {...} represents an arbitrary JavaScript expression. Therefore, "{HelloWorld}" very different from {HelloWorld} .