React单页应用输入带路径域名时页面无法访问的问题

1. 配置Amplify重写与重定向规则 #

单页应用使用BrowserRouter时，直接访问子路由会触发服务器查找对应物理文件，找不到就返回404。Amplify默认不处理这类SPA路由跳转，需添加规则让所有请求指向index.html：

• 打开Amplify控制台进入你的应用
• 左侧菜单选部署 > 重写与重定向
• 在重写规则区域点击添加规则，填入：
  • 源地址：</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
  • 目标地址：/index.html
  • 类型：200 (Rewrite)
• 保存规则后重新部署应用

2. 检查Google Domains域名转发设置 #

如果用Google Domains的域名转发，必须开启路径保留：

• 登录Google Domains控制台找到你的域名
• 进入网站 > 域名转发
• 确认转发类型为永久重定向（301）或临时重定向（302），并勾选转发路径选项
• 保存设置后等待10-30分钟让DNS生效

3. 路由配置验证 #

你的React路由配置本身无问题，只需注意：

• 内部跳转保持使用Link组件而非原生a标签
• 若应用部署在子路径才需设置BrowserRouter的basename属性，根域名部署无需额外配置

测试建议：先直接访问Amplify默认域名（如xxx.amplifyapp.com/login），如果能正常访问，说明问题出在Google Domains转发或Amplify重写规则；若默认域名也404，优先排查Amplify重写规则配置。

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