Expo+React Native构建PWA后直接访问路径或刷新页面返回404问题求助

问题根源 #

该404问题是单页应用客户端路由的典型表现：
Expo 开发环境内置的Web服务器默认做了全路径重定向配置，所有请求都会返回根目录的index.html，由前端路由接管路径渲染，所以开发环境跳转、刷新都正常。而npx serve启动的默认静态服务没有配置对应规则，访问/Profile/xxx这类非根路径时，服务器会尝试查找对应路径下的静态文件，找不到就返回404。

解决方案 #

直接修改你现有的serve.json，添加重定向规则，把所有请求都回退到index.html：

{
  "headers": [
    {
      "source": "static/**/*.js",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ],
  "rewrites": [
    {
      "source": "**",
      "destination": "/index.html"
    }
  ]
}

修改完成后重启npx serve web-build服务即可，直接访问子路径、刷新页面都不会再触发404。

其他部署场景兼容提示 #

后续如果部署到其他静态服务平台，添加对应回退规则即可：

• Nginx部署：在站点配置中添加try_files $uri $uri/ /index.html;规则
• Netlify部署：项目根目录新增_redirects文件，写入内容/* /index.html 200
• Vercel部署：在vercel.json中添加和上述serve.json一致的rewrites规则

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