reactjs之为 React、Angular 等使用 HTTP 服务器

我在 GO 中为静态文件创建了这个小型 HTTP 服务器:

func wrapHandler(h http.Handler) http.HandlerFunc { 
  return func(w http.ResponseWriter, r *http.Request) { 
    h.ServeHTTP(srw, r) 
    log.Printf("GET %s", r.RequestURI) 
  } 
} 
 
 
 
func main() { 
  http.HandleFunc("/", wrapHandler( 
    http.FileServer(http.Dir("/static")) 
  )) 
 
  if err := http.ListenAndServe(":8080", nil); err != nil { 
    panic(err) 
  } 
} 

它与 React 和 Angular 完美配合 dist文件(在转换它们之后)。但是，如果我已经选择了一条路线，例如 http://example.org:8080/customers并在浏览器中单击刷新我找不到 404 页面。这是我的代码失败的唯一情况。
这是因为在 React 和 Angular 上 index.html充当前端 Controller 并可以处理路由。但是为了让它工作，我需要在内部重定向所有 未找到 对 index.html 的请求。
由于是处理路线的 Angular/ react ，我不想创建 http.HandleFunc对于在 angular/react.js 中创建的每条路线。我想要类似 express 的东西:

app.use(express.static(path.join(__dirname, 'static'))); 
app.use("*",function(req,res){ 
  res.sendFile(path.join(__dirname, 'static/index.html')); 
}); 

或 NGINX:

try_files $uri $uri/ index.html; 

关于如何在 go 中做到这一点的任何线索？

请您参考如下方法:

了解 Go 的 http 包如何处理路由匹配很重要，因为它与其他语言/框架有点不同。 HandleFunc在引擎盖下使用 ServeMux 并且(来自 docs ):

ServeMux is an HTTP request multiplexer. It matches the URL of each incoming request against a list of registered patterns and calls the handler for the pattern that most closely matches the URL. [emphasis mine]

鉴于这种行为，我建议为静态中的每个文件夹创建显式处理程序(例如 css/ 、 js/ )，或者将所有内容放在静态的单个子文件夹中，然后用您的 index.html 进行响应所有其他请求的文件(使用根路由( / ))。这是有效的，因为请求的路由前缀为 /css/或 /js/将更紧密地匹配适当的静态处理程序路由，而所有其他路由都不会，因此只能最接近地匹配根路由。您只需要确保不要在前端创建冲突的路由。
这样，任何对 CSS/JS/图像 Assets 的明确请求都将通过提供静态目录来处理，并且所有其他请求都将通过您的 React 应用程序进行响应。
这是一个示例(为简单起见，省略了您的 wrapHandler):

func main() { 
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { 
        http.ServeFile(w, r, "static/index.html") 
    }) 
    http.Handle("/js/", http.FileServer(http.Dir("static"))) 
    http.Handle("/css/", http.FileServer(http.Dir("static"))) 
 
    if err := http.ListenAndServe(":8080", nil); err != nil { 
        panic(err) 
    } 
} 

或者如果你想更明确一点:

func main() { 
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { 
        http.ServeFile(w, r, "static/index.html") 
    }) 
     
    jsFs := http.FileServer(http.Dir("static/js")) 
    http.Handle("/js/", http.StripPrefix("/js", jsFs)) 
     
    cssFs := http.FileServer(http.Dir("static/css")) 
    http.Handle("/css/", http.StripPrefix("/css", cssFs)) 
 
    if err := http.ListenAndServe(":8080", nil); err != nil { 
        panic(err) 
    } 
} 

我的网站的工作方式几乎相同(使用 Vue 而不是 React)。
改进
如上所述，您可能会考虑将所有静态 Assets 放在当前 static/ 的子文件夹中。文件夹。考虑像这样构建文件:

public/ 
  index.html 
  static/ 
    css/ 
    js/ 
    img/ 

这是构建 React 应用程序的默认文件结构(但 public 默认称为 build)。
这将使您以更简化的方式使用上述方法，因为您只需要一个文件服务器处理程序来处理所有静态 Assets 。然后你可以使用以下代码:

func main() { 
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) { 
        http.ServeFile(w, r, "public/index.html") 
    }) 
 
    fs := http.FileServer(http.Dir("public/static/")) 
    http.Handle("/static/", http.StripPrefix("/static", fs)) 
 
    if err := http.ListenAndServe(":8080", nil); err != nil { 
        panic(err) 
    } 
}