如何在使用singlepage时将header.html和footer.html添加到所有路线中？

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

任何想法可以实现这一点？或者你通常只希望没有人自己去注册？

来源

2017-03-01 Hugo Lewenhaupt

我使用导航页面周围的“镀铬”导航组件。

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>) 
    } 
}

我将其安装到所有路由阵营路由器：

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任何组件将工作这样。

来源

2017-03-01 14:02:02 aitchnyu

是的，我们没有使用React，我们只允许使用Flask，Python，jQuery，HTML和CSS。而且，我们也在寻找一种避免重新加载引导程序的方法，如果没有必要，我们也会寻找jQuery。 –

如何在使用singlepage时将header.html和footer.html添加到所有路线中？

回答

相关问题