react-router 总是显示主页

Question

我正在尝试将 react-router 实现到 react SPA 中以添加一些 url，但主应用程序只显示在设置的每条路线上。

这是主应用代码

render: function () {
        return (

            <div className="row panel panel-default">

                <h2 className="text-center">Projects</h2>

                <ul>
                    <li><Link to="/1">About</Link></li>
                    <li><Link to="/2">Inbox</Link></li>
                </ul>

                {

                    <div className="col-md-8 col-md-offset-2">

                        <Header itemsStore={this.firebaseRefs.items}/>
                        <hr />
                        <div className={"content " + (this.state.loaded ? 'loaded' : '')}>
                            <List items={this.state.items}/>
                            {this.deleteButton()}
                        </div>
                    </div>

                }

                {this.props.children}

            </div>
        )

    },

Answer 1

您的 <App> 组件需要渲染 this.props.children

var App = React.createClass({
    render: function() {
        return (
            <div>
                <div id="nav_bar">links links links layout whatever</div>
                <div id="content">
                    {/* Route component gets rendered here */}
                    {this.props.children}
                </div>
            </div>
        );
    }
});

React 路由器示例：https://github.com/reactjs/react-router/tree/master/examples

react-router 总是显示主页

react-router always shows main page

reactjs

react-router