Module Federation React微前端：NotFound页面不渲染及路由匹配问题

问题1：NotFound组件无法渲染，未匹配路径跳转到首页 #

原因 #

• 容器或子应用配置了全局重定向规则，强制将所有未匹配路径跳转到/
• 容器应用的NotFound路由未放置在所有路由的最后，被前面的路由规则拦截
• 子应用内部路由逻辑存在重定向，覆盖了容器的NotFound匹配逻辑

解决办法 #

1. 排查所有应用的路由配置，移除类似<Redirect from="*" to="/" />的强制重定向代码
2. 容器应用的路由必须用Switch组件包裹，且将NotFound路由放在最末尾，示例配置：

import { Switch, Route } from 'react-router-dom';
import NotFound from './NotFound';
import Home from './Home';
import AuthApp from './AuthApp';

function AppRouter() {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/auth" component={AuthApp} />
      {/* NotFound路由必须放在所有路由最后 */}
      <Route path="*" component={NotFound} />
    </Switch>
  );
}

3. 子应用内部避免设置全局重定向，确保路由逻辑不干扰容器的路由匹配流程

问题2：根路由放顶部时/auth路由无法渲染 #

原因 #

react-router-dom@5的Route组件默认是部分匹配规则，path="/"会匹配所有以/开头的路径（包括/auth），因此放在路由列表顶部时会优先渲染根组件，不会继续匹配后续路由。

解决办法 #

给根路由添加exact属性，限制只有完全匹配/时才渲染根组件：

<Route exact path="/" component={Home} />

添加后，访问/auth时会跳过根路由，正常匹配到对应的子应用路由组件。

额外提醒 #

• 所有应用的路由都要用Switch组件包裹，保证只会匹配第一个符合条件的路由
• 子应用的路由前缀要和容器应用的配置保持一致，避免路由冲突
• 检查Webpack Module Federation配置，确保子应用入口正确导出组件，无额外路由拦截逻辑

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