Question

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

有关如何实现这一目标的任何想法？或者你通常只是期望没有人自己去/注册？

Answer 1

我使用导航组件来渲染＆＃34; chrome＆＃34;在页面周围。

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

如何在使用单页时为所有路线添加header.html和footer.html？

1 个答案: