どのようにしてルータv4にコンポーネントをロードすることができますか？

Question

これは私にルーター4を反応させることを混乱させるものです。現在、メインの親コンポーネントindex.jsxにルート設定があります。ナビゲーションバーはNavBar.jsxのコンポーネントです。

NavBar.jsxのリンクをクリックすると、コンポーネントがBody.jsxにロードされるようにします。現在は、すべてを置き換えて画面全体にコンポーネントを読み込みます。

私はReact Router 3を使って何かをやっていたと思っています。子供たちが私のために光を当てることができれば、大変感謝しています。ありがとうございました。

ここで一番上のコンポーネントのコードです：

ReactDOM.render(
 
    <Router> 
 
    <div> 
 
     <Route path="/" component={Index} /> 
 
    </div> 
 
    </Router> 
 

 
, document.getElementById('app'));

私のコンポーネントはインデックスから行く>ボディ> TabArea ナビゲーションバーインデックスであるが>バナー> HotelTop

タブエリアがありますHotelTopのナビゲーションバーが選択するコンポーネントをレンダリングする場所。

Answer 1

私はそれを理解しました。リンクをロードする場所では、スイッチを入れてそこにルーティングする必要がありますが、そこに新しいルータを置かないでください。

何かのような...

<div> 
 
    <switch> 
 
    <Route exact path = "/" component={containertoloadpaths}/> 
 
     <Route path = "/Path1" component={component1} 
 
     <Route path = "/Path2" component={component2} 
 
    </Route> 
 
    </switch> 
 
</div> 
 

 
//You can put code like this anywhere in your app where you'd like your links to load, and they'll load there.

Answer 2

私はReact Router 4でルートコンポーネントをレンダリングする場所を指定する方法がないと信じています。それは常にインプレースでレンダリングされます。ですから、コンポーネントは常にそれをレンダリングしたRouteの子になります。

しかし、あなたはアプリで多くのRouterセットアップを持つことができます - ので、あなたが必要な結果を達成することができます - 例Body.jsxに1つ、いくつかのSidebar.jsx内の別の1のために。