Comment puis-je corriger les erreurs « 404 introuvable » lors du routage d'un frontend React avec un backend Go ?

Redirection vers le routage frontend dans Go

L'impossibilité d'accéder aux chemins frontend à l'aide d'URL telles que http://localhost:8090/my_frontend_path lors de l'exécution à la fois du backend Go et du L'interface React peut être attribuée à un problème fondamental :

La racine Cause

Lorsque vous accédez à http://localhost:8090/my_frontend_path depuis le navigateur, le routeur frontend React n'est pas encore actif. Par conséquent, le navigateur demande la page au serveur. Cependant, my_frontend_path n'existe pas dans le dossier de construction, ce qui entraîne une erreur 404 « Page non trouvée ».

Une solution simple côté serveur

Un moyen simple de résoudre ce problème consiste à mettre en œuvre une approche « fourre-tout » au niveau du serveur Go. Cela implique de renvoyer index.html (et par conséquent votre application) pour tous les chemins qui ne sont pas explicitement gérés ailleurs. Voici un exemple :

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

Ce code vérifie l'existence du fichier demandé. S'il n'existe pas, il remplace le chemin demandé par "/", ce qui redirigera vers index.html et permettra au routeur React de gérer le routage.

Alternative à l'historique de hachage

Une autre L'option consiste à utiliser l'historique de hachage pour votre application React. Avec cette méthode, la requête initiale adressée à l'URL my_frontend_path n'interagira pas avec le serveur Go. Au lieu de cela, il sera entièrement géré par le routeur React. L'historique de hachage peut être configuré dans les fonctions createBrowserHistory ou createHashHistory de votre application React.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!