React Router子路由仅生产环境访问报NoSuchKey错误问题

• 该异常是客户端路由（CSR）渲染逻辑与静态托管服务的默认路由匹配规则冲突导致，和React业务代码本身无关。
• 本地开发服务（webpack-dev-server、Vite Dev Server等）默认内置了路径兜底逻辑：无论请求的路径是什么，都会返回项目根目录的index.html文件，之后React Router在浏览器端读取当前地址栏路径，匹配对应路由组件完成渲染，因此本地访问所有子路由都能正常运行。
• 从报错的NoSuchKeyXML格式可以判断，你的生产环境是将构建产物上传到了对象存储类服务做静态站点托管，这类服务的默认逻辑是严格按照请求路径匹配存储内的实体文件：当你访问/work路径时，服务会直接查找存储桶根目录下名为work的文件，找不到该文件时就直接返回NoSuchKey错误，根本不会加载React应用，自然也走不到React Router的路由匹配逻辑。
• 额外注意：你的路由配置中/works路径和实际访问的/work路径存在单复数差异，属于笔误，需要自行对齐路径配置，否则即使解决了托管规则问题，该路径也会匹配不到对应组件。

• 核心配置原则：给静态托管服务添加路径重写/兜底规则，将所有不匹配实体文件的请求，统一返回根目录的index.html文件，返回状态码设为200。
• 配置完成后，用户访问子路由时，服务会先正常返回index.html，浏览器加载完React应用包后，React Router会自动读取当前地址栏的路径，匹配对应组件完成渲染，逻辑和本地开发环境完全一致。
• 规则优化：可以将重定向规则的匹配范围排除带.js、.css、.png、.jpg、.svg等静态资源后缀的请求，避免真实静态资源丢失时返回错误的HTML内容，方便排查资源加载问题。
• 不同托管场景的配置参考：
  • 对象存储类静态托管：在服务的「静态站点配置」中找到「重定向规则」「错误页面兜底」配置项，将404错误的响应页面设为index.html，响应状态码改为200即可。
  • 自行用Nginx托管：在站点对应的配置块中添加try_files $uri $uri/ /index.html;配置，重载Nginx即可生效。
• 最后修正路由配置的笔误：将访问路径和Route的path属性对齐，避免路径不匹配导致的组件渲染异常。

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