React应用部署Golang服务器后刷新路径出现404问题求助

问题场景 #

开发环境（npm run dev）下，React路由重定向功能正常，刷新任意路径都会跳转到首页；但执行npm run build后将静态文件嵌入Golang服务器部署时：

• 仅根路径localhost:8080可正常访问
• 程序内导航功能正常
• 刷新localhost:8080/pods等非根路径时出现404错误

尝试过设置Golang自定义NotFound处理器重定向到/，但不确定修复方向。

原因分析 #

React使用createBrowserRouter实现客户端路由：

• 程序内导航通过JS在客户端切换组件，不会向服务器发起新请求
• 刷新非根路径时，浏览器会直接向服务器请求该路径的资源，但Golang服务器的静态文件服务仅能识别根路径的index.html，不存在对应/pods的物理文件，因此返回404
• 直接重定向到/会丢失原路径信息，React路由无法根据原路径渲染对应组件，并非最优解

解决方案：Golang端修改 #

需要让Golang服务器对所有非API、非静态资源的请求返回index.html，交由React客户端路由处理路径。

步骤1：添加自定义SPA文件服务处理器 #

在main.go中新增以下函数：

// spaFileServer 处理单页应用路由，文件不存在时返回index.html
func spaFileServer(fs http.FileSystem) http.Handler {
    fileServer := http.FileServer(fs)
    return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
        // 检查请求路径是否存在于静态文件系统中
        _, err := fs.Open(r.URL.Path)
        if err != nil {
            // 路径不存在，重写请求路径为根路径，返回index.html
            r.URL.Path = "/"
        }
        fileServer.ServeHTTP(w, r)
    })
}

步骤2：替换原有静态文件服务代码 #

找到main函数中的静态服务代码：

r.PathPrefix("/").Handler(http.FileServer(http.FS(subFS)))

替换为：

r.PathPrefix("/").Handler(spaFileServer(http.FS(subFS)))

步骤3：移除无效的NotFound处理器 #

之前添加的自定义NotFoundHandler可以删除，因为自定义SPA处理器已经覆盖了404场景的处理。

验证 #

1. 重新执行npm run build生成最新静态文件
2. 编译并重启Golang服务器
3. 访问localhost:8080/pods并刷新页面，确认无404且组件正常渲染
4. 测试程序内导航及其他路由，确保功能正常

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