リアビュールータV4の内側のビュー

Question

私は角度の背景から来て、私は角度のui-routerで前に知っているものを作成しようとしています。

サイドバーにクリックされたリンクに基づいて変更される静的なサイドバーとビューを持つアプリのメインテンプレートを作成したいとします。

キーはサイドバーが静的であるが、ビューは動的に読み込まれるためのキーです。私が行ったチュートリアルでは、すべてのビューでナビゲーションリンクをリロードしていますが、それは私が撮影しているものではありません。たぶん

がreact-routerで次のことを達成しようとしている...私は何かが足りないのですが、私の心の中でサイドバーが静的であると再ロードすることはありません：

<article id="my-app"> 
    <header> 
     <h1>Oh my beautiful app!</h1> 
    </header> 

    <aside> 
     <nav> 
      <Link to="/"/> 
      <Link to="/page1"/> 
      <Link to="/page2"/> 
     </nav> 
    </aside> 

    <section><!-- VIEW RENDERED HERE --></section> 

    <footer></footer> 
</article> 

これはそれがで行われている方法ではない場合リアクトリアクトで正しい方法とそれがどのように行われたのかを知りたいのですが

Answer 1

これはあなたが期待しているものかどうかはわかりませんが、私は眠そうです。ルルツ。

あなたは

<Router> 
    <Route path="/" render={() => <LayoutComponent><MyComponent /></LayoutComponent>} /> 
</Router> 

ような何かを行うことができ、その後のレイアウトで、どこかでレンダリングする場所

{this.props.children} 

Answer 2

[OK]を、正しい方向に私を指しているため、あなたに bunakawaka に感謝します。これは解決策ではありませんでしたが、私はどこに行く必要があるかを指摘しました。ここで

はソリューションです....

<article id="my-app"> 
    <header> 
     <h1>Oh my beautiful app!</h1> 
    </header> 

    <aside> 
     <nav> 
      <Link to="/">Dashboard</Link> 
      <Link to="/account">Account</Link> 
      <Link to="/about">About</Link> 
     </nav> 
    </aside> 

    <section> 
     <BrowserRouter> 
      <Switch> 
       <Route exact path="/account" component={Account}/> 
       <Route exact path="/about" component={About}/> 
       <Route path="/" component={Dashboard}/> 
      </Switch> 
     </BrowserRouter> 
    </section> 

    <footer></footer> 
</article>