404 エラーを回避するために GoLang でフロントエンド ルートをリダイレクトする方法は?

GoLang をフロントエンド ルーティングにリダイレクトする

問題の説明

ブラウザで "/my_frontend_path" のようなパスに直接アクセスすると、GoLang が代わりに 404 エラーを返しますフロントエンド React へのルーティングの委任router.

問題分析

主な問題は、React ルーターが初期化される前にそのようなパスにアクセスすると、サーバーがリクエストを処理してエラーを返すことです。

Single-サーバー ソリューション

単純なサーバー側の「キャッチオール」アプローチを実装して、サポートされていないすべてのパスをフロントエンド ルーターにリダイレクトできます。このアプローチは、要求されたファイルが存在しない場合にindex.html ページを返し、React ルーターがルーティングを処理できるようにすることで機能します。

コードの実装

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 requested file exists, return it; otherwise, return index.html
        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, return index.html
                r.URL.Path = "/"
            }
        }
        fs.ServeHTTP(w, r)
    })

    http.ListenAndServe(":8090", nil)
}

この実装では:

• 要求されたファイルの存在がチェックされます。
• 存在しない場合 (例: "/my_frontend_path")、リクエストはindex.html にリダイレクトされます。
• index.html の React ルーターは、"/my_frontend_path" ルーティングを処理します。

注

このメソッドは存在しないファイルに対してindex.htmlを返すため、「favicon.ico」などのファイルで問題が発生する可能性があります。このような場合、追加のチェックを追加して、リダイレクトを特定の拡張子のみに制限できます。

以上が404 エラーを回避するために GoLang でフロントエンド ルートをリダイレクトする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。