外部反应组件/模块的路由答案

【问题标题】：Routing for external react component/module外部反应组件/模块的路由
【发布时间】：2018-06-03 09:12:43
【问题描述】：

我正在构建一个具有许多子级别/页面和路由的外部 React 组件/模块。我正在使用 React 路由器 V4。该组件将被导入到主机应用程序中，该主机应用程序本身具有自己的路由系统。主机应用程序也在使用 React Router V4。

组件的根视图是卡片的网格视图，当用户单击其中一张卡片时，它会将它们带到卡片的详细视图。当用户在详细视图上时，浏览器中的 url 应该更改，以便用户可以为该页面的 url 添加书签并稍后访问该页面。

主机应用程序和组件之间的路由应该如何工作？主机应用程序是否应该将路由模式传递给组件，或者组件和主机应用程序是否应该拥有自己独立的路由系统。有没有人有这方面的例子？

【问题讨论】：

宿主应用程序是否也在使用 React Router V4？
是的，宿主应用也在使用 React Router v4

【解决方案1】：

React Router V4 在这种情况下表现得非常好。这两个应用程序都需要自己的顶级路由器组件才能独立运行。但是您可以组织代码，这样您就可以为 SubModule 重用主 switch 语句。主机应用程序上的 url 都将以 /subModule/ 为前缀，即 /subModule/foo，而在子模块独立应用程序上它们只是 /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>

【讨论】：