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查看docs 在这里 。