React 404 on refresh or direct url path in golang server

I have this code to serve react build app:

package main

import (
	"fmt"
	"log"
	"net/http"
	"time"
)

func main() {

	r := http.NewServeMux()

	r.HandleFunc(`^/`, index)
	buildHandler := http.FileServer(http.Dir("build"))
	r.Handle("/", buildHandler)

	srv := &http.Server{
		Handler:      r,
		Addr:         ":5000",
		WriteTimeout: 15 * time.Second,
		ReadTimeout:  15 * time.Second,
	}

	fmt.Println("Server started on PORT 5000")
	log.Fatal(srv.ListenAndServe())

}

func index(w http.ResponseWriter, r *http.Request) {
	http.ServeFile(w, r, "build/index.html")
}

Folder structure looks like this:

But I'm getting 404 not found on refresh or when I try to directly go to path. How can I make it go to desired path instead of getting 404?

The issue you are encountering is related to the client-side routing used by React (or other frontend frameworks). When you refresh the page or directly visit a specific path, the server doesn't recognize the route since it's primarily serving a static index.html file and not handling client-side routing.

To fix this issue, you need to configure your Go server to handle client-side routing by redirecting all requests to the index.html file. This way, the client-side routing in your React app can take over and handle the correct page display.

Here's the modified code to handle client-side routing:

package main

import (
    "fmt"
    "log"
    "net/http"
    "time"
)

func main() {
    r := http.NewServeMux()

    // Redirect all requests to the index.html file
    r.HandleFunc("/", index)

    // Serve the static files from the "build" directory
    buildHandler := http.FileServer(http.Dir("build"))
    r.Handle("/static/", buildHandler)
    r.Handle("/js/", buildHandler)
    r.Handle("/css/", buildHandler)

    srv := &http.Server{
        Handler:      r,
        Addr:         ":5000",
        WriteTimeout: 15 * time.Second,
        ReadTimeout:  15 * time.Second,
    }

    fmt.Println("Server started on PORT 5000")
    log.Fatal(srv.ListenAndServe())
}

func index(w http.ResponseWriter, r *http.Request) {
    http.ServeFile(w, r, "build/index.html")
}

In the modified code, we're handling requests to the root path ("/") by redirecting them to the index.html file. Additionally, we're serving the static files (JS, CSS, etc.) from the "build" directory using the http.FileServer. By doing this, your server will correctly serve the index.html file for all routes, and the client-side routing in your React app will take care of displaying the appropriate pages.