SPA 子应用路由最佳实践方案

TIP

推荐使用 react-router 进行源码子应用前端路由管理。只支持 Browser 模式；⛔ 不支持 Hash 模式。

基础概念解释

SPA 与 MPA ？

• SPA（单页应用）：浏览器只加载一次 HTML、CSS 和 JS。之后页面切换全靠 JavaScript 动态擦除并重绘当前页面的内容，不请求新的 HTML 文件。
• MPA（多页应用）：每次点击链接或跳转，浏览器都会向服务器请求一个新的 HTML 文件，服务器返回完整页面后，整个窗口刷新并重新渲染。

MPA 不存在前端路由，每个页面会打包出不同的bundle资源；在菜单配置中，每个菜单对应配置不同的资源即可。

Browser 模式和 Hash 模式？

• Browser（History）模式：正常的URL，示例https://example.com/home （没有 #，看着像普通网页）
• Hash 模式：URL 示例：https://example.com/#/home （注意中间的 #）

Lovrabet 采用微前端架构，由微前端统一控制 Browser 模式，不支持在子应用中使用 Hash 模式。

react-router 开发指南

参考官方文档：https://reactrouter.com/start/framework/routing

Lovrabet 菜单配置

参考文档：Lovrabet 主子应用开发指引

常见问题

在 lovrabet 中如何配置动态路由

当页面 url 中需要传递参数的时候，可以使用两种方式：

• query 参数模式：/order?id=orderId
• react-router 动态路由模式：/order/:orderId

query 参数模式

在菜单配置的“页面访问路径”中，配置 path 部分即可，即 /order

参数部分由路由跳转的时候动态拼接。例如：/order?id=${orderId}

react-router 动态路由模式

若子应用中有如下 router config：

{
  path: "/order/:orderId",
  element: <OrderDetail />,
}

需要在菜单配置的“页面访问路径”中，配置完整的动态路由parh，即 /order/:orderId

路由跳转时，根据动态路由规则，拼接对应的完整path即可，例如 navigate(`/order/${orderId}`)

隐藏菜单页面（可选）

一般动态传递参数的页面，往往作为详情页存在，是由别的页面（列表页）跳转过来。可以按需将该菜单页面在菜单中隐藏。如下图操作即可