Mehrere ReactDOM.render-Aufrufe mit gemeinsamem Router-Kontext

Question

Ich habe zwei React-Komponenten wie diese gerendert.

ReactDOM.render(
    <Router history={ browserHistory }> 
    <Route path='/items' component={ App }> 
     <IndexRoute component={ Home } /> 
     <Route path='/items/:id' component={ Details } /> 
    </Route> 
    </Router>, 
    document.getElementById('app') 
); 

Und die zweite, die eine Seitenleiste ist.

ReactDOM.render(
    <Sidebar />, 
    document.getElementById('sidebar') 
); 

Ich möchte die Link- Helfer verwenden, um von reagieren-Router in der Sidebar Komponente. Ich erhalte jedoch den folgenden Fehler: "Unerreichte Invariant-Verletzung: Links, die außerhalb eines Router-Kontextes gerendert werden, können nicht navigieren.". Was sinnvoll ist, da die Sidebar nicht wie im ersten Beispiel im Routerkontext liegt.

Gibt es eine Möglichkeit, den Router-Kontext mit der Sidebar zu teilen?

Ich mag würde die Seitenleiste Layout auf der Strecke (und Zugriff Objekt der Router in this.props richtig) und verwenden Link- wie es sein sollte basierend ändern.

Ich möchte mich nicht mit Hacky-Ansätzen wie history.pushState oder parsing location.path auseinandersetzen, um das Layout der Seitenleiste entsprechend der entsprechenden Route der Elemente zu ändern.

Answer 1

Sie sollten in der Lage sein, nur Ihre Sidebar in einem eigenen <Router> zu rendern. Die wichtige Sache ist, dass sie die gleiche history Instanz teilen (in diesem Fall browserHistory).

Wenn ein <Router> angehängt wird, fügt er seiner history Instanz einen Listener hinzu. Wenn eine Instanz history einen neuen Standort empfängt, benachrichtigt sie alle ihre Listener.

ReactDOM.render((
    <Router history={browserHistory}> 
    <Route component={Sidebar} /> 
    </Router> 
) document.getElementById('sidebar')