Module Federation微前端react-router-dom v6路由架构咨询

• 双BrowserRouter冲突本质：BrowserRouter会独立封装维护自身的history实例，多个实例之间状态完全隔离、互不感知，这就是点击/app1导航时子应用仍停留在somePage1状态的核心原因。如果直接移除子应用的Router组件复用宿主上下文，子应用独立开发/运行时会因为缺少Router上下文抛出useRoutes() may be used only in the context of a <Router> component错误。
• MemoryRouter双向同步失败原因：React Router V6收紧了history实例的操作权限，没有暴露V5版本可直接操作的公开history对象，硬绑定回调很容易出现状态更新时序问题，触发同步死循环或路径不一致。

采用路由分层管控+统一通信协议+环境自适应的架构，可无缝兼容多技术栈子应用，后续接入新子应用无需修改宿主代码：

• 宿主层：唯一持有全局BrowserHistory实例，负责顶层路由匹配、全局导航渲染、路由事件分发，不感知子应用内部路由实现逻辑
• 协议层：所有子应用统一暴露三个标准接入能力：mount(container, { initialPath, onNavigate })挂载方法、unmount()卸载方法、onParentNavigate(path)宿主路由变更回调，宿主只按协议调用，不关心子应用技术栈
• 子应用层：独立运行时使用自身框架的路由组件（如React的BrowserRouter、Angular Router），接入宿主时使用内存路由，通过协议和宿主做双向状态同步，不会和全局history产生冲突

1. 宿主侧改造 #

首先抽离全局可管控的history实例，替代React Router内置的BrowserRouter：

// host/src/history.js
import { createBrowserHistory } from 'history';
export default createBrowserHistory();

封装通用微前端容器组件，统一处理子应用加载、路由双向同步逻辑：

// host/src/HostApp.jsx
import { Router, Routes, Route, NavLink } from 'react-router-dom';
import { Suspense, useRef, useEffect, useCallback } from 'react';
import browserHistory from './history';

// Module Federation 动态加载子应用逻辑，按实际exposes配置调整
const loadMfeModule = async (scope) => {
  await __webpack_init_sharing__('default');
  const container = window[scope];
  await container.init(__webpack_share_scopes__.default);
  const factory = await container.get('./mount');
  return factory();
};

const MfeContainer = ({ scope, basePath }) => {
  const containerRef = useRef(null);
  const mfeApiRef = useRef(null);
  const isMounted = useRef(false);

  // 子应用内部路由变更时，同步更新全局路由
  const handleMfeRouteChange = useCallback((innerPath) => {
    const fullPath = `${basePath}${innerPath}`;
    if (window.location.pathname !== fullPath) {
      browserHistory.push(fullPath);
    }
  }, [basePath]);

  // 监听全局路由变更，同步到对应子应用
  useEffect(() => {
    const unlisten = browserHistory.listen(({ location }) => {
      if (location.pathname.startsWith(basePath) && mfeApiRef.current?.onParentNavigate) {
        const innerPath = location.pathname.replace(basePath, '') || '/';
        mfeApiRef.current.onParentNavigate(innerPath);
      }
    });
    return unlisten;
  }, [basePath]);

  // 子应用挂载/卸载逻辑
  useEffect(() => {
    const mount = async () => {
      const mfeModule = await loadMfeModule(scope);
      const initialPath = window.location.pathname.replace(basePath, '') || '/';
      const api = mfeModule.mount(containerRef.current, {
        initialPath,
        onNavigate: handleMfeRouteChange
      });
      mfeApiRef.current = api;
    };
    if (!isMounted.current) {
      isMounted.current = true;
      mount();
    }
    return () => {
      mfeApiRef.current?.unmount?.();
      mfeApiRef.current = null;
      isMounted.current = false;
    };
  }, [scope, basePath, handleMfeRouteChange]);

  return <div ref={containerRef} />;
};

export default function HostApp() {
  return (
    <Router location={browserHistory.location} navigator={browserHistory}>
       <div>Hello, I'm the host app!</div>
       <NavLink to='/app1'><button>app1</button></NavLink>
       <NavLink to='/app2'><button>app2</button></NavLink>
       <NavLink to='/app3'><button>app3</button></NavLink>
       <Suspense fallback={'Loading'}>
         <Routes>
           <Route path='/' element={<div>home page container</div>} />
           <Route path='app1/*' element={<MfeContainer scope="mfeApp1" basePath="/app1" />}/>
           <Route path='app2/*' element={<MfeContainer scope="mfeApp2" basePath="/app2" />}/>
           <Route path='app3/*' element={<MfeContainer scope="mfeApp3" basePath="/app3" />}/>
         </Routes>
       </Suspense>
    </Router>
  )
}

2. React子应用改造（以MfeApp1为例） #

子应用自适应运行环境，独立运行时用BrowserRouter，接入宿主时用MemoryRouter，对外暴露统一接入协议：

// mfe-app1/src/bootstrap.jsx
import { createRoot } from 'react-dom/client';
import { Router, Routes, Route } from 'react-router-dom';
import { createBrowserHistory, createMemoryHistory } from 'history';
import HomePageApp1 from './pages/Home';
import SomePageOfMfeApp1 from './pages/SomePage';

const App = ({ history }) => {
  return (
    <>
      <h1>It is a Mfe App1</h1>
      <Router location={history.location} navigator={history}>
        <Routes>
          <Route index element={<HomePageApp1 />} />
          <Route path='somePage' element={<SomePageOfMfeApp1 />} />
        </Routes>
      </Router>
    </>
  )
};

// 独立运行场景
if (process.env.NODE_ENV === 'development' && !window.__POWERED_BY_HOST__) {
  const root = createRoot(document.getElementById('root'));
  const browserHistory = createBrowserHistory({ basename: '/app1' });
  root.render(<App history={browserHistory} />);
}

// 暴露给宿主的标准接入方法
export const mount = (el, { initialPath, onNavigate }) => {
  const memoryHistory = createMemoryHistory({ initialEntries: [initialPath] });
  // 监听子应用内部路由变更，上报给宿主
  const unlisten = memoryHistory.listen(({ location }) => {
    onNavigate(location.pathname);
  });
  const root = createRoot(el);
  root.render(<App history={memoryHistory} />);

  return {
    // 宿主路由变更时同步子应用内部状态
    onParentNavigate: (nextPath) => {
      if (memoryHistory.location.pathname !== nextPath) {
        memoryHistory.push(nextPath);
      }
    },
    unmount: () => {
      unlisten();
      root.unmount();
    }
  }
};

子应用Webpack配置中只需要将./mount方法通过Module Federation exposes出去即可，无需额外调整。

3. 跨技术栈适配说明 #

后续接入Angular、Vue等技术栈子应用时，宿主代码完全不需要修改，只需要子应用侧实现统一的mount协议即可：

• Angular子应用：在mount方法中启动Angular模块，监听Router事件做路由上报，onParentNavigate触发时调用Router.navigate方法同步内部状态
• Vue子应用：在mount方法中初始化Vue实例，监听vue-router的路由事件完成双向同步即可

改造完成后，在/app1/somePage路径下点击顶部/app1导航时，宿主会将路由变更同步给子应用，子应用自动跳转到根路径渲染首页，不会再停留在子页面状态，双Router冲突、独立运行报错等问题也会完全解决。

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