React构建应用在Golang服务器刷新/直接访问路径时出现404

你的问题出在React单页应用(SPA)的前端路由与Go服务器静态资源处理的匹配逻辑冲突，以及原代码中路由匹配的写法错误。以下是修复方案：

修复后的完整代码 #

package main

import (
	"fmt"
	"log"
	"net/http"
	"time"
)

func main() {
	r := http.NewServeMux()

	// 自定义静态资源处理逻辑：优先返回存在的静态文件，不存在则返回index.html
	fs := http.FileServer(http.Dir("build"))
	r.Handle("/", http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		// 检查当前请求的路径是否对应build目录下的存在文件
		_, err := http.Dir("build").Open(r.URL.Path)
		if err != nil {
			// 文件不存在，返回index.html交由React前端路由处理
			http.ServeFile(w, r, "build/index.html")
			return
		}
		// 文件存在，正常返回静态资源
		fs.ServeHTTP(w, r)
	}))

	srv := &http.Server{
		Handler:      r,
		Addr:         ":5000",
		WriteTimeout: 15 * time.Second,
		ReadTimeout:  15 * time.Second,
	}

	fmt.Println("Server started on PORT 5000")
	log.Fatal(srv.ListenAndServe())
}

问题原因解析 #

1. 路由匹配写法错误：原代码中r.HandleFunc(^/, index)完全无效，因为http.ServeMux不支持正则表达式路径匹配，它只会匹配字面量等于^/的请求，几乎不会被触发。
2. SPA前端路由特性：React的路由是前端路由，所有路径（如/about、/dashboard）实际上都对应同一个index.html文件。当你刷新页面或直接访问这些路径时，Go服务器会尝试在build目录下寻找对应名称的文件，找不到就返回404，而没有转发到index.html让前端路由处理。

修复逻辑说明 #

• 先检查请求的路径是否存在对应的静态资源（比如CSS、JS、图片等），如果存在则正常返回。
• 如果静态资源不存在，说明这是一个前端路由路径，直接返回index.html，由React的路由库来解析路径并渲染对应组件。

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