Wie kann ich „404 Not Found'-Fehler beim Routing eines React-Frontends mit einem Go-Backend beheben?

Umleitung zum Frontend-Routing in Go

Die Unfähigkeit, über URLs wie http://localhost:8090/my_frontend_path auf Frontend-Pfade zuzugreifen, wenn sowohl das Go-Backend als auch das ausgeführt werden Das React-Frontend kann auf ein grundlegendes Problem zurückgeführt werden:

The Root Ursache

Wenn Sie über den Browser auf http://localhost:8090/my_frontend_path zugreifen, ist der Frontend-React-Router noch nicht aktiv. Daher fordert der Browser die Seite vom Server an. Allerdings existiert my_frontend_path nicht im Build-Ordner, was zu einem 404-Fehler „Seite nicht gefunden“ führt.

Eine einfache serverseitige Lösung

Eine einfache Möglichkeit, dieses Problem zu beheben, ist Implementierung eines „Catch-All“-Ansatzes auf Go-Serverebene. Dies beinhaltet die Rückgabe von index.html (und folglich Ihrer App) für alle Pfade, die nicht explizit an anderer Stelle behandelt werden. Hier ist ein Beispiel:

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)
}

Dieser Code prüft, ob die angeforderte Datei vorhanden ist. Wenn es nicht vorhanden ist, ändert es den angeforderten Pfad in „/“, wodurch eine Umleitung zu index.html erfolgt und dem React-Router ermöglicht wird, das Routing zu übernehmen.

Hash-History-Alternative

Andere Die Option besteht darin, einen Hash-Verlauf für Ihre React-Anwendung zu verwenden. Bei dieser Methode interagiert die erste Anfrage an die URL „my_frontend_path“ nicht mit dem Go-Server. Stattdessen wird es vollständig vom React-Router verwaltet. Der Hash-Verlauf kann in den Funktionen „createBrowserHistory“ oder „createHashHistory“ Ihrer React-App konfiguriert werden.

Das obige ist der detaillierte Inhalt vonWie kann ich „404 Not Found'-Fehler beim Routing eines React-Frontends mit einem Go-Backend beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!