反应式路由器-dom v6模块联盟的微前端
反应式路由器-dom v6模块联盟的微前端
提问于 2022-06-27 08:05:37
我开始使用微前端模块联邦插件。现在，我在构建应用程序之间的路由方面遇到了一些问题。我的主机应用程序有路由3 mfe应用程序。他们每一个都有自己的路由。hostApp中的导航作为内部导航正在工作，但是当我再次单击hostApp/app1时，它仍然呈现出hostApp/app1/somePage1 1。您可以推荐什么样的架构？我如何控制它?现在我使用的是反应性路由器-dom V6，但是我想以这样的方式构建应用程序，明天我可以添加另一个库，比如角路由器或bla-路由器，而不需要对主机进行任何更改。
export default function HostApp() {
return (
<BrowserRouter>
<div>Hello, I'm the host app!</div>
<NavLink to='/app1'> <button> app1 </button> </NavLink>
<NavLink to='/app2'> <button> app1 </button> </NavLink>
<NavLink to='/app3'> <button> app1 </button> </NavLink>
<Routes>
<Route path='/' element={
<Suspense fallback={'Loading'}><div>home page container</div></Suspense>} />
<Route path='app1/*' element={
<Suspense fallback={'Loading'}> <MfeApp1/></Suspense>}/>
<Route path='app2/*' element={
<Suspense fallback={'Loading'}> <MfeApp2/></Suspense>}/>
<Route path='app3/*' element={
<Suspense fallback={'Loading'}> <MfeApp3/></Suspense>}/>
</Routes>
</BrowserRouter>
)}MfeApp：
export default function MfeApp1() {
return (
<BrowserRouter>
<h1>It is a Mfe App1 </h1>
<Routes>
<Route index path='app1' element={<HomePageApp1 />} />
<Route path='app1/somePAge' element={<SomePageOfMfeApp1 />} />
</Routes>
</>
)
}在两个应用程序BrowserRouter中使用都是一个好主意吗？当2个应用程序试图控制浏览器历史时，我在这里看到了一个大问题。但是，如果我在Host中保留一个BrouserRouter，就会得到错误：“useRoutes()只能在组件的上下文中使用”。这对我来说也很有意义，因为内部应用程序也需要一些路由器来控制它。我还尝试在mfe应用程序和控制路径中使用MemoryBrowser和内存历史，比如onNavigete(fromHost)和onParentNavigate(来自mfe)，但我没有使用react路由器-dom V6。因此，任何工作代码或您的建议的例子都会很有帮助。
Stack Overflow用户
发布于 2022-11-30 15:34:25
我认为如何处理这一问题的选择不多：
- @jagzviruz建议的是主机和远程处理路由之间的结合。
- https://github.com/module-federation/module-federation-examples/tree/master/react-nested-routers -主机负责更新网址。
- 您可以在这两个应用程序中使用
BrowserHistory，并在远程应用程序中操作path，使其始终带有远程应用前缀(参见示例这里 )。我认为这是最容易理解的解决方案，但可能不是最有效的解决方案。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72768822
复制相关文章
相似问题
腾讯云开发者
