使用 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中文網其他相關文章！