独立したコンポーネントのルーティングを使った反応アプリケーション

Question

私は反応ルータを使ってアプリケーションのルーティングを管理しています。

私のアプリは2つのパネルに分かれており、私はそれらを個別にルーティングしたいと思います。ルートの変更のように、1つのパネルまたは他のパネルのみが変更されます。

私はこれを試しましたが、/conversationsから/conversations/xxxxxxに経路を変更すると、サイドコンポーネントがリロードされます。

export default (
    <div> 
    <Route path="login" component={Login} /> 
    <Route path='/' component={requireAuthentication(Messenger)}> 
     <Route path='/conversations' components={{side: ConversationContainer, main: DefaultPanel}} /> 
     <Route path='/conversations/:conversationId' components={{side: ConversationContainer, main: ActiveConversation}} /> 
     <Route path='/ended-conversations' components={{side: EndedConversationContainer, main: DefaultPanel}} /> 
     <Route path='/ended-conversations/:conversationId' components={{side: EndedConversationContainer, main: ActiveConversation}} /> 

     <Redirect from="/" to="/conversations" /> 
    </Route> 
    </div> 
); 

EDIT：たとえば、のは/settingsを言わせて、私は一例でConversationContainerの代わりに、新しいコンポーネントを表示するには、右側にあるものは何でも変更することなく、左側のパネルを変更したいと思います。

少しはっきりしていることを願っています。ルータでこれを行う方法はありますか？ それ以外の場合は、おそらく状態を使用する必要があります。

多くのお礼ありがとうございます

Answer 1

リアクタ・ルータはネストされた経路でこれを達成するのに役立ちます。ルートを設定した後、ネストされたルートを持つルートのレンダリングメソッドで{ this.props.children }にアクセスするだけです。どの子コンポーネントがコンポーネントに渡されるかは、ルート構成によって決まります。

// router.js 

<Route path="conversations/:conversationid component={Conversation}> // ".../conversations/1234" 
    <Route path="began" component={BeginConversation} /> // ".../conversations/1234/began" 
    <Route path="ended" component={EndConversation} /> // ".../conversations/1234/ended" 
</Route> 


// Conversation.js 

render() { // In the render method of the component matching the container route 

<div> 
    <div className="left-panel"> 
    // Format left panel... this will not change on route began/ended route change 
    </div> 

    { this.props.children } // Tells react the render child components passed from your nested routes 
</div> 

ここにいくつかの便利なリソースがあります。

• React router docs & example on nested routes
• A good thread on nested routes