react-router: 'Invariant Violation: Invalid tag: {HelloWorld}', while the component is right there

Question

I'm new to React and am trying to get up to speed with react-router (v1.0.0).

I've setup a simple component and a simple route, but it's giving me an error: Invariant Violation: Invalid tag: {HelloWorld}. You'd think it to be a clear error, but I can't figure out what's wrong with the code.

Here it 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 switch out routes with <HelloWorld /> in the ReactDom.render statement, it works fine.

Any help is much appreciated!

Answer 1

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

component={HelloWorld}
//        ^          ^

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