如何创建可集成多框架应用的带路由的FED可复用导航组件

核心需求 #

• 打造一款可复用导航组件，组件仅负责渲染宿主应用传入的跳转链接，提供点击触发跳转的基础交互
• 组件需要具备跨框架通用性：不同宿主应用会基于自身技术栈实现专属路由体系，例如React项目采用react-router-dom搭建路由，Angular项目使用框架原生的Angular路由能力，组件不能和特定框架的路由实现强绑定

已完成工作与现存卡点 #

• 目前已基于Web Components完成导航组件除路由跳转外的全部功能开发，但跨框架路由跳转的实现始终没有找到最优方案：
  • 直接共享宿主应用history实例的方案不可行：如果将宿主内部生成的history实例传递给组件使用，会因为React Router与Angular Router对history pushState的封装逻辑、内部状态同步机制存在本质差异，组件无法用统一逻辑调用相关能力，还会大幅提升组件与宿主框架的耦合度
  • 调用原生history API的方案不可行：如果在组件内部直接使用window.history.pushState修改地址栏，实际运行会出现异常——各前端框架的内部路由状态管理逻辑，会忽略组件层面直接触发的全局history操作，最终出现地址栏URL更新、但框架匹配的页面路由组件未同步切换的问题

待解决问题 #

希望获取适配任意前端库/框架的导航组件路由跳转实现路径，不需要针对每个技术栈单独维护一套组件逻辑。

内容的提问来源于stack exchange，提问作者yogesh