使用 Go 后端路由 React 前端时如何修复'404 Not Found”错误？

重定向到 Go 中的前端路由

在运行 Go 后端和运行时无法使用 http://localhost:8090/my_frontend_path 等 URL 访问前端路径React 前端可以归因于一个基本问题：

The Root原因

当您从浏览器访问 http://localhost:8090/my_frontend_path 时，前端 React 路由器尚未激活。因此，浏览器向服务器请求页面。但是，构建文件夹中不存在 my_frontend_path，导致 404“找不到页面”错误。

简单的服务器端解决方案

纠正此问题的一种直接方法是通过在 Go 服务器级别实现“包罗万象”的方法。这涉及到为其他地方未明确处理的任何路径返回index.html（以及您的应用程序）。下面是一个示例：

const FSPATH = "./build/"

func main() {
    fs := http.FileServer(http.Dir(FSPATH))

    http.HandleFunc("/my_api", func(w http.ResponseWriter, _ *http.Request) { w.Write([]byte("API CALL")) })
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        // If the requested file exists, return it; otherwise return index.html (fileserver default page)
        if r.URL.Path != "/" {
            fullPath := FSPATH + strings.TrimPrefix(path.Clean(r.URL.Path), "/")
            _, err := os.Stat(fullPath)
            if err != nil {
                if !os.IsNotExist(err) {
                    panic(err)
                }
                // Requested file does not exist so we return the default (resolves to index.html)
                r.URL.Path = "/"
            }
        }
        fs.ServeHTTP(w, r)
    })
    http.ListenAndServe(":8090", nil)
}

此代码检查所请求的文件是否存在。如果不存在，它将请求的路径更改为“/”，这将重定向到index.html并允许React路由器处理路由。

哈希历史替代

另一个选项是为您的 React 应用程序使用哈希历史记录。使用此方法，对 my_frontend_path URL 的初始请求将不会与 Go 服务器交互。相反，它将完全由 React 路由器处理。哈希历史记录可以在 React 应用程序的 createBrowserHistory 或 createHashHistory 函数中配置。

以上是使用 Go 后端路由 React 前端时如何修复'404 Not Found”错误？的详细内容。更多信息请关注PHP中文网其他相关文章！