Go バックエンドで React フロントエンドをルーティングするときに発生する「404 Not Found」エラーを修正するにはどうすればよいですか?

Go のフロントエンド ルーティングへのリダイレクト

Go バックエンドとReact フロントエンドは根本的な問題に起因している可能性があります:

ルート原因

ブラウザから http://localhost:8090/my_frontend_path にアクセスすると、フロントエンドの React ルーターがまだアクティブになっていません。したがって、ブラウザはサーバーにページをリクエストします。ただし、my_frontend_path がビルド フォルダーに存在しないため、404 "ページが見つかりません" エラーが発生します。

シンプルなサーバー側の解決策

この問題を修正する簡単な方法の 1 つは、次のとおりです。 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 中国語 Web サイトの他の関連記事を参照してください。