AWS Amplify部署的React TypeScript应用无法直接访问嵌套路由咨询

这个问题是单页应用(SPA)客户端路由与Amplify静态资源托管规则不匹配导致的，和你的React代码本身关系不大，核心是Amplify需要配置重定向规则，让所有非静态资源的请求都转发到index.html，由React Router在客户端处理路由。

解决方法1：通过Amplify控制台配置 #

1. 登录AWS Amplify控制台，打开你的应用
2. 切换到Hosting标签页，选择Rewrites and redirects子标签
3. 在Redirect rules区域点击Edit，添加以下规则：
   • 源地址：</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
   • 目标地址：/index.html
   • 类型：选择200 (Rewrite)
4. 保存配置，等待Amplify重新部署生效后测试

如果需要更简化的规则（适合大多数场景），也可以用：

• 源地址：/*
• 目标地址：/index.html
• 类型：200 (Rewrite)

注：正则规则更精准，会排除静态资源请求，避免不必要的转发。

解决方法2：通过amplify.yml代码化配置（推荐） #

在项目根目录的amplify.yml文件中，添加重定向配置段，确保配置被纳入版本管理：

frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
  rewrites:
    - source: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
      target: /index.html
      status: 200

修改完成后将代码推送到关联的代码仓库，Amplify会自动重新部署并应用新配置。

额外注意 #

• 确保你的React项目使用的是BrowserRouter（而非HashRouter），HashRouter虽然能绕过404问题，但URL会带有#，不是生产环境的最佳实践。
• 配置生效后，直接访问嵌套路由时，Amplify会返回index.html，之后由React Router在客户端解析路由并渲染对应组件，404问题即可解决。

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