Routing für externe Reaktionskomponente/Modul

Question

Ich baue eine externe React Komponente/Modul, die viele Unterebenen/Seiten und Routen hat. Ich benutze React Router V4. Diese Komponente wird in eine Host-Anwendung importiert, die selbst über ein eigenes Routing-System verfügt. Die Host-App verwendet auch React Router V4.

Die Stammansicht der Komponente ist eine Rasteransicht von Karten. Wenn der Benutzer auf eine der Karten klickt, wird eine Detailansicht der Karte angezeigt. Wenn sich der Benutzer in einer Detailansicht befindet, sollte sich die URL im Browser ändern, damit ein Benutzer die URL dieser Seite als Lesezeichen speichern und diese Seite später besuchen kann.

Wie sollte das Routing zwischen der Host-Anwendung und der Komponente funktionieren? Sollte die Host-App das Routenschema in die Komponente einreichen oder sollte die Komponente und Host-App ein eigenes Routing-System haben? Hat jemand Beispiele dafür?

Answer 1

React Router V4 spielt sehr gut in dieser Situation. Beide Apps benötigen eine eigene Top-Level-Router-Komponente, um eigenständig laufen zu können. Sie können den Code jedoch so organisieren, dass Sie die Hauptschalteranweisung für das Submodul erneut verwenden können. Die URLs auf der Host-Anwendung würden alle mit/subModule /, d. H./SubModule/foo, vorangestellt werden, und sie würden einfach/foo in der eigenständigen subModule-Anwendung sein.

HostApp.jsx 
<Router> 
<Switch> 
<Route path="/other" component={Other} /> 
<Route path="/subModule" component={SubModuleRouter} /> 
</Switch> 
</Router> 

SubModule.jsx 
<Router> 
    <Route path="/" component={SubModuleRouter} /> 
</Router> 

SubModuleRouter.jsx 
<Switch> 
<Route exact path="/foo" component={FooComponent} /> 
</Switch>