シングルページを使用している場合、すべてのルートにheader.htmlとfooter.htmlの両方を追加するにはどうすればよいですか？

Question

現在、header.htmlとfooter.htmlがあります。このヘッダは、当社のウェブサイトの/ routeにロードされているbase.htmlに含まれています。私たちは単一のページデザインを使用しているため、最初にページを読み込むとき以外は、いつでもbase.htmlをリロードしません。 base.htmlには、jQueryを使用してすべてのhtmlコンテンツをロードするために使用するIDを持つdivがあります。私たちが今直面している問題は、ルートへのアクセスがヘッダーの負荷を直接バイパスし、したがってjQuesryスクリプトとブートストラップなどをバイパスし、ページがうんざりして正しく動作しないという事実です。 視覚的なURLの変更を完全に削除し、ルートでmadeupルート名を使用することができると考えました。しかし、それは過度に複雑で、それを行うために必要な安全な方法ではないと感じます。 理想的には、要求が想定されている場所からのものではないかどうかを知りたいのです。

どのようにこれを達成することができますか？それとも、誰も自分で/サインアップすることを誰も期待していないのですか？

Answer 1

ページの周りに「クロム」をレンダリングするNavコンポーネントを使用します。

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がそのように動作しますレンダリングするすべてのコンポーネント。