React路由器不呈现组件

Question

我们这样使用react-router:

ReactDOM.render(
    <Router>
        <Route path="/" component={AnyPic}>
            <Route path="p/:photoId" component={PhotoView} />
        </Route>
    </Router>,
    document.getElementsByClassName("container")[0] 
);

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

var PhotoView = React.createClass({
    render: function(){
        return (
            <p>This is the photo view</p>
        )
    }
});

包括之后react-router,过去刚刚localhost:8000开始看起来像localhost:8000/#/?_k=wulhmi.不确定那些额外的参数来自哪里.

无论如何,当试图访问localhost:8000/#/p/XYZ页面时不断回头/.任何帮助将非常感激.

Answer 1

原因是因为您没有渲染您的孩子路线.查看react路由器文档.

如果添加this.props.children到AnyPic组件中,一切都会起作用:

var AnyPic = React.createClass({
    render: function() {
        return (
            <div>
                <p>Hello world</p>
                {this.props.children}
            </div>
        )
    }
});

正如@robertklep在评论中指出的那样,URL中的"额外"内容正在添加,因为路由器默认使用哈希历史记录,您可能希望使用BrowserHistory这样做,您需要安装历史记录模块:npm install history 请参阅此处的文档.