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

原因是因为您没有渲染您的孩子路线。查看the react router docs。

如果您向this.props.children组件添加AnyPic，则一切正常：

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

正如@robertklep在评论中指出的那样，＆＃34;额外＆＃34;正在添加URL中的东西，因为路由器默认使用哈希历史记录，您可能希望使用BrowserHistory来执行此操作，您需要安装history module：npm install history 请参阅文档here。

React路由器不呈现组件

1 个答案: