我正在构建一个具有许多子级别/页面和路由的外部 React 组件/module。我正在使用 React Router V4。该组件将被导入到本身具有自己的路由系统的主机应用程序中。主机应用程序也使用 React Router V4。
组件的根视图是卡片的网格视图，当用户单击其中一张卡片时，它会将它们带到卡片的详细视图。当用户处于详细视图时，浏览器中的 url 应该更改，以便用户可以将该页面的 url 加入书签并稍后访问该页面。
宿主应用程序和组件之间的路由应该如何工作？宿主应用程序是否应该将路由架构传递到组件中，或者组件和宿主应用程序是否应该拥有自己独立的路由系统。有没有人有这方面的例子？
React Router V4 在这种情况下表现得非常好。这两个应用程序都需要自己的顶级路由器组件才能独立运行。但是您可以组织代码，以便可以重用 SubModule 的主 switch 语句。主机应用程序上的 url 都将以 /subModule/ 为前缀，即 /subModule/foo，它们在 subModule 独立应用程序上只是 /foo。
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>