react-router:'不变违规:无效标签:{HelloWorld}',而组件就在那里

Question

我是React的新手,我正在尝试使用react-router(v1.0.0)加快速度.

我已经设置了一个简单的组件和一个简单的路由,但它给了我一个错误:Invariant Violation: Invalid tag: {HelloWorld}.你认为这是一个明显的错误,但我无法弄清楚代码有什么问题.

这里是:

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

如果我转出routes与<HelloWorld />在ReactDom.render声明中,它工作正常.

任何帮助深表感谢!

Answer 1

如果再次查看文档,您将看到component需要对组件的引用,而不是字符串:

component={HelloWorld}
//        ^          ^

在JSX属性值中,"..."表示一个字符串(就像在JavaScript中一样),并{...}表示任意JavaScript表达式.因此"{HelloWorld}"非常不同{HelloWorld}.