Question

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

主要应用程序代码

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-router示例：https://github.com/reactjs/react-router/tree/master/examples

react-router始终显示主页面

1 个答案: