如何在微前端（microfrontend）应用中检测跨子项目路由变更

问题根因 #

你当前的监听逻辑依赖React组件的props更新触发componentDidUpdate，但跨微应用修改URL时，项目B的React路由上下文没有感知到全局URL的变化，自然不会触发组件更新，也就走不到比对逻辑。

解决方案 #

你可以选择以下任意一种方案实现跨应用路由监听：

方案1：监听全局浏览器路由事件（通用无框架依赖） #

直接监听浏览器的路由变化事件，不需要依赖React组件的更新周期，步骤如下：

• 在项目B需要监听路由的组件的componentDidMount生命周期中注册全局路由监听
• 在componentWillUnmount中移除监听避免内存泄漏
• 每次路由变化时手动比对路径执行对应逻辑

示例代码：

class YourComponent extends React.Component {
  // 存储上一次匹配的路径，避免重复执行逻辑
  lastPath = ''

  componentDidMount() {
    // 初始化时先执行一次判断
    this.handleRouteChange();
    // 监听popstate事件（浏览器前进后退触发）
    window.addEventListener('popstate', this.handleRouteChange);
    // 重写pushState和replaceState方法，捕获主动路由跳转行为
    const originalPushState = window.history.pushState;
    window.history.pushState = (...args) => {
      originalPushState.apply(window.history, args);
      window.dispatchEvent(new Event('pushstate'));
    };
    const originalReplaceState = window.history.replaceState;
    window.history.replaceState = (...args) => {
      originalReplaceState.apply(window.history, args);
      window.dispatchEvent(new Event('replacestate'));
    };
    // 监听自定义的pushstate、replacestate事件
    window.addEventListener('pushstate', this.handleRouteChange);
    window.addEventListener('replacestate', this.handleRouteChange);
  }

  componentWillUnmount() {
    // 移除所有监听避免内存泄漏
    window.removeEventListener('popstate', this.handleRouteChange);
    window.removeEventListener('pushstate', this.handleRouteChange);
    window.removeEventListener('replacestate', this.handleRouteChange);
  }

  handleRouteChange = () => {
    const currentPath = window.location.pathname;
    if (currentPath.includes('/messages/inbox/') && currentPath !== this.lastPath) {
      this.lastPath = currentPath;
      // 原有业务逻辑代码
      // ...logic code
    }
  }

  // 原有componentDidUpdate可以保留用来处理项目内部路由变化，也可以删除后全走全局监听逻辑
  componentDidUpdate(prevProps) {
    const { location } = this.props;
    if (location.pathname.includes('/messages/inbox/') && prevProps.location.pathname !== location.pathname) {
      // ...logic code
    }
  }
}

方案2：通过微前端框架的全局状态通信同步路由 #

如果你用的是qiankun、single-spa这类微前端框架，可以直接用框架提供的全局状态能力：

• 项目A跳转路由时，同时将最新路由信息更新到全局状态
• 项目B订阅全局状态的路由字段变化，触发对应逻辑
  这种方案不需要全局劫持浏览器API，性能更高、适配性更强。

方案3：统一使用基座路由分发 #

如果你的微前端架构有统一基座，可以把路由监听逻辑放到基座实现，匹配到对应路径时再主动通知项目B执行对应逻辑。

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