Single-Spa微前端导航异常：URL丢失根路径、刷新404求助

1. 配置路由基础路径 #

你的应用托管在GitHub Pages的/root-mfe路径下，但当前路由未包含该根路径，导致导航时URL丢失前缀。修改guille-root-config.ts中的路由构造代码，添加basePath参数：

const routes = constructRoutes(microfrontendLayout, {
  basePath: "/root-mfe"
});

这会让所有路由自动带上/root-mfe前缀，确保导航时URL正确指向/root-mfe/hacker-news而非/hacker-news。

2. 修正导航链接 #

更新microfrontend-layout.html中的导航链接，使其匹配带前缀的路径：

<nav>
  <div><a href="/root-mfe/hacker-news" onclick="singleSpaNavigate(event)">hacker news</a></div>
  <div><a href="/root-mfe/books-store" onclick="singleSpaNavigate(event)">books store</a></div>
</nav>

或者使用相对路径（更灵活，无需硬编码前缀）：

<nav>
  <div><a href="hacker-news" onclick="singleSpaNavigate(event)">hacker news</a></div>
  <div><a href="books-store" onclick="singleSpaNavigate(event)">books store</a></div>
</nav>

3. 解决GitHub Pages刷新404问题 #

GitHub Pages默认不支持SPA的history模式，刷新带路径的URL时会返回404。解决方法：

• 在root-config的GitHub仓库中创建404.html文件，内容与index.html完全一致。当用户刷新页面时，GitHub Pages会返回404.html，Single-Spa会接管路由并正确加载对应微前端。
• 确保GitHub Pages的部署源设置为正确的分支（如gh-pages）。

备选方案：使用Hash路由 #

如果不想配置404.html，可改用Hash路由模式，避免服务器请求路径：

1. 在guille-root-config.ts中启用Hash路由：

import { registerApplication, start, setHashRouting } from "single-spa";
// ...其他代码
setHashRouting(true);
start();

2. 修改路由与导航链接为Hash格式：

<route path="#/hacker-news">
  <application name="@guille/mfe"></application>
</route>
<route path="#/books-store">
  <application name="@guille/bookstore-mfe"></application>
</route>

<nav>
  <div><a href="#/hacker-news" onclick="singleSpaNavigate(event)">hacker news</a></div>
  <div><a href="#/books-store" onclick="singleSpaNavigate(event)">books store</a></div>
</nav>

这样刷新页面时，Hash部分不会被服务器解析，Single-Spa会直接处理路由，不会出现404。

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