React Router与模块联邦中首页导航冲突问题求解

核心原因 #

因为你将react-router-dom设为共享依赖，子应用嵌入容器后，navigate调用的是容器的路由上下文，所以navigate('/')会直接跳转到容器的根路径，而非子应用自身的根路径。

方案1：动态设置路由basename（推荐） #

利用React Router的basename特性，让子应用的路由自动适配独立运行和嵌入容器两种场景，无需修改跳转逻辑。

子应用修改步骤： #

1. 在子应用的路由配置中，动态计算basename：

   • 可以通过当前URL路径判断容器分配的前缀（比如你的容器给子应用分配的是/child）
   • 或者由容器在加载子应用时注入全局变量（更灵活，适合多容器场景）

2. 修改子应用的App.tsx：

// 子应用 App.tsx
import { useRoutes, useLocation } from 'react-router-dom';

export const routes = [
  {
    path: '/',
    element: <HomePage />
  }, 
  {
    path: 'demo',
    element: <DemoPage />
  }
];

const App: React.FC = () => {
  const location = useLocation();
  
  // 方式1：通过URL路径自动识别前缀
  const basename = location.pathname.startsWith('/child') ? '/child' : '/';
  
  // 方式2：读取容器注入的全局变量（推荐，更灵活）
  // const basename = (window as any).__MICRO_APP_BASE__ || '/';
  
  // 给useRoutes传入basename参数
  const appRoutes = useRoutes(routes, { basename });
  
  return appRoutes;
};

3. （可选）容器端注入全局变量：
   如果用方式2，容器在加载子应用前，可注入全局变量：

// 容器应用加载子应用的位置
window.__MICRO_APP_BASE__ = '/child';
const ChildPage = React.lazy(() => import('ChildApp/App'));

这样修改后，子应用调用navigate('/')时：

• 独立运行：跳转到/（自身首页）
• 嵌入容器：跳转到/child/（子应用在容器中的首页）

方案2：使用相对路径跳转 #

把子应用中所有navigate('/')改成navigate('.')或navigate('')，这种方式无需修改路由配置，但需要修改所有跳转逻辑，适合小型子应用。

比如：

// 子应用中跳转逻辑
navigate('.'); // 等价于跳转到当前路由的根路径，嵌入时就是/child/，独立时是/

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