Anwendung mit unabhängigen Komponentenrouting reagieren

Question

Ich benutze React-Router, um das Routing der App zu verwalten.

Meine App ist in zwei Bereiche unterteilt, und ich möchte sie unabhängig voneinander routen. Wie eine Änderung der Route würde nur ein Panel oder das andere ändern.

Ich habe so etwas versucht, aber wenn ich Route von /conversations zu /conversations/xxxxxx ändere, lädt es die Seitenkomponente neu.

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: Zum Beispiel, lassen Sie uns /settings sagen, ich möchte das linke Panel ohne Änderung, was zu Veränderungen auf der rechten Seite ist die neue Komponente anstelle von ConversationContainer mit gutem Beispiel anzuzeigen.

Ich hoffe, dass ist ein bisschen klar. Gibt es eine Möglichkeit, dies mit dem Router zu tun? Sonst muss ich wahrscheinlich einen Zustand verwenden.

Vielen Dank

Answer 1

Reagieren Router hilft Ihnen dies durch verschachtelte Routen zu erreichen. Nachdem Sie Ihre Routen konfiguriert haben, müssen Sie nur noch auf die Methode in der Rendermethode aller Routen zugreifen, auf denen verschachtelte Routen enthalten sind. Welche Komponenten an die Komponente übergeben werden, hängt von der Konfiguration der Route ab.

// 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> 

Hier sind ein paar nützliche Ressourcen!

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