Google Cloud Bucket托管React静态网站无法访问子路径的问题

这不是静态网站不支持子路径访问，是你漏了关键的Bucket配置步骤。

React是单页应用，所有路由逻辑都在前端JS里。当你直接访问www.XXXX.com/auth时，Google Cloud Bucket会默认去找这个路径对应的物理文件（比如auth文件或者auth/index.html），但你的项目里根本没有这个文件，所以Bucket会返回404，根本不会加载index.html，自然没法触发前端路由逻辑。

解决步骤很简单：

• 执行这条命令，把Bucket的错误页面也设置为index.html：

  gsutil web set -m index.html -e index.html gs://www.XXXX.com
  

  这样不管用户访问哪个路径，只要Bucket找不到对应的物理文件，就会返回index.html，之后React的前端路由就能正常接管，加载对应的页面。
• 额外检查一下Bucket里所有文件的权限，确保/assets/index.44250449.js这类静态资源都设置了公共读权限，不然index.html加载不到JS，路由也没法工作。
• 确认你的React项目用的是BrowserRouter（不是HashRouter），开发环境能正常访问子路径，这点应该没问题，但生产环境必须配合Bucket的fallback配置才行。

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