使用单页时，如何将header.html和footer.html添加到所有路由？

Question

我们目前有一个header.html和一个footer.html，它们包含在我们的base.html中，加载到我们网站的/route中。我们使用的是单页设计，因此除了最初加载页面时，我们不会在任何时候重新加载base.html。在base.html中，我们有一个带有id的div，我们使用jQuery加载所有html内容。我们现在面临的问题是，访问一个路由直接绕过了header的负载，因此我们的jQuesry脚本和引导程序等等，然后页面看起来像垃圾一样，不能正常工作。 我们认为我们可以完全删除可视URL更改，并在路由中使用madeup路由名称。但这感觉像是一个过于复杂，不一定安全的方式做它。 理想情况下，我们希望能够知道请求是否来自它应该来自的地方

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

Answer 1

我使用一个导航组件来呈现页面周围的“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路由器中的所有路由：

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的组件都会这样工作