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

Posted 2021-04-08

我正在构建一个具有许多子级/页面和路由的外部React组件/模块。我正在使用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>