在使用singlepage时，如何在所有路由上同时添加header.html和footer.html？

Question

我们目前在我们的base.html中包含了一个header.html和一个footer.html，这两个our被加载到我们网站的/base.html中。我们使用的是单页面设计，因此除了最初加载页面时，我们不会在任何时候重新加载base.html。在base.html中，我们有一个带有id的div，用来通过jQuery将所有html内容加载到。我们现在面临的问题是，直接访问路由会绕过header的负载，从而绕过jQuesry-scripts和bootstrap等，然后页面看起来就像垃圾一样，不能正常工作。我们认为我们可以完全删除可视的URL-change，在我们的路由中使用虚构的路由名称。但这感觉像是一种过于复杂和不必要的安全方式。理想情况下，我们希望能够知道请求是否不是来自于它应该到达的地方。

你有什么想法可以做到这一点吗？或者你通常只是希望没有人会自己去/signup吗？

Answer 1

我使用了一个Nav组件来呈现页面周围的"chrome“。

export class Nav extends Component {
  render = () => {
    return (
      <div>
        <rb.Navbar>
          <rb.Navbar.Header>
            <rb.Navbar.Brand>
              <a href="#">aktai</a>
            </rb.Navbar.Brand>
          </rb.Navbar.Header>
        </rb.Navbar>
        {this.props.children}
      </div>)
  }
}

我将其挂载到React Router中的所有路由：

const router = (
  <Router history={browserHistory}>
      <Route component={Nav}>
        <Route path="/folders" component={Folders}/>
      </Route>
  </Router>
)

你也可以这样叫它：

<Nav>
  <h1>welcome to my site</h1>
  This is a place
</Nav>

任何呈现this.props.children的组件都会这样工作。