如何在使用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添加到所有路線中？

回答

相關問題