React应用路由异常：主域名跳转至子域名丢失路由路径

你的核心问题是主域名到子域名的重定向未保留请求路径：当前的DNS/转发配置只把domain.com根地址重定向到app.domain.com，但没有携带/route这类路径信息，导致跳转后丢失路由；而子域名本身的SPA路由是正常的，所以app.domain.com/route能访问。之前用的GitHub Pages脚本只处理同域名下的SPA路由 fallback，不涉及跨子域名的转发场景，所以无效。

解决步骤 #

1. 修改主域名的重定向规则，保留请求路径 #

因为你的域名托管在Google，部署在DigitalOcean，需要在Google域名管理后台调整转发设置：

• 进入Google域名控制台，找到你的域名的「转发」设置
• 把原来的简单重定向（仅转发根域名）改成带路径转发：勾选「转发路径」选项，确保domain.com/route会被转发到app.domain.com/route
• 同时确保开启HTTPS转发，避免协议不一致的问题

如果是通过DigitalOcean的负载均衡或CDN做重定向，需要配置重定向规则时使用请求URI变量（比如Nginx中的$request_uri），示例Nginx配置片段：

server {
    listen 80;
    server_name domain.com;
    return 301 https://app.domain.com$request_uri;
}

2. 确保子域名的SPA路由 fallback 配置正确 #

虽然app.domain.com/route当前能访问，但为了兼容转发后的请求，确认部署服务器的SPA路由配置：

• 如果用Nginx部署，确保配置中有fallback规则：

  server {
      listen 443 ssl;
      server_name app.domain.com;
      root /path/to/your/react/app/build;
      index index.html;
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  }
  

• 如果用DigitalOcean App Platform部署，在应用设置中开启「SPA路由」选项，平台会自动处理路由 fallback

3. 移除GitHub Pages专用脚本 #

该脚本是针对GitHub Pages的特殊重定向机制设计的，不适用于你的跨子域名转发场景，建议从index.html中删除，避免潜在冲突

验证 #

修改配置后，测试domain.com/route，应该会自动跳转到app.domain.com/route，并正常加载对应路由的页面。

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