微前端中如何基于未知相对基础路径创建React Router绝对路由？

问题 #

我通过Webpack Module Federation将微前端（MFE）应用加载到多个不同的宿主应用中，设计上MFE对宿主无感知，但通过Module Federation与宿主共享React Router。

MFE可能部署在以下任意路由路径中（未来还可能新增更多）：

/container/project/<pId>/users
/container/subscriptions/<sId>/project/<pId>/users

MFE无法预知自身的基础路径，仅知道存在基础路径。

MFE内部包含以下顶层及嵌套路由：

/new
/all
/invite
/<uId>
/<uId>/contacts
/<uId>/projects
/<uId>/subscriptions

我希望顶层路由（new、all、invite）的导航链接始终相对MFE的基础路径跳转，但直接使用<Link to="/new"/>会跳转到应用根路径（如https://application.com/new），而非预期的https://application.com/container/project/<pId>/users/new。

使用相对链接（如<Link to="../new"/>）也存在问题，会根据当前页面层级产生错误跳转：

/invite           =>    /new          // 符合预期，但仅在顶层路由生效
/<uId>/contacts   =>    /<uId>/new    // 不符合预期

请问能否在React Router树中创建一个锚点作为MFE的基础路径，使MFE内的所有绝对路由都相对该锚点跳转？

解决方案 #

可以通过React Router的路由上下文能力，动态获取MFE的基础路径并生成正确的导航链接，核心思路是基于当前MFE的路由根路径构建绝对链接，而非依赖相对路径或硬编码基础路径。

1. 自定义MFELink组件（推荐） #

封装一个自定义链接组件，自动匹配MFE的根路径，确保所有导航都基于该路径跳转：

import { Link, useMatch } from 'react-router-dom';

export const MFELink = ({ to, ...props }) => {
  // 匹配当前MFE的根路由上下文，获取基础路径
  const mfeRootMatch = useMatch('/*');
  // 拼接目标路径：确保路径格式正确（处理带/或不带/的情况）
  const targetPath = `${mfeRootMatch.pathname}${to.startsWith('/') ? to : `/${to}`}`;
  
  return <Link to={targetPath} {...props} />;
};

使用方式

在MFE内部直接使用自定义组件替代原生Link：

<MFELink to="/new">新建用户</MFELink>
<MFELink to="/all">全部用户</MFELink>
<MFELink to="/invite">邀请用户</MFELink>

无论当前处于MFE的哪个嵌套路由层级（如<uId>/contacts），点击链接都会跳转到MFE基础路径下的对应路由（如/container/project/<pId>/users/new）。

2. 编程式导航的适配 #

如果需要使用编程式导航（如useNavigate），同样基于MFE根路径构建目标地址：

import { useNavigate, useMatch } from 'react-router-dom';

const SomeComponent = () => {
  const navigate = useNavigate();
  const mfeRootMatch = useMatch('/*');

  const goToNewUser = () => {
    navigate(`${mfeRootMatch.pathname}/new`);
  };

  return <button onClick={goToNewUser}>新建用户</button>;
};

原理说明 #

• useMatch('/*')会匹配当前路由上下文的根路径，也就是宿主应用中加载MFE时定义的路由前缀（如/container/project/<pId>/users）。
• 通过拼接该根路径与MFE内部的目标路由，生成完整的绝对路径，确保导航始终相对于MFE的基础路径，不受当前页面层级影响。

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