reactjs - 如何让 golang 重定向到前端路由？

Question

目前我正在使用以下设置为我的 react 应用程序提供服务

func main() {
    http.Handle("/", http.FileServer(http.Dir("./build/")))
    http.HandleFunc("/my_api", handler)
    http.ListenAndServe(":8090", nil)
}

和前端

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/my_frontend_path">MyPath</Link>
            </li>
          </ul>
        </nav>

        <Switch>
          <Route path="/my_frontend_path">
            <MyPath />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

但是当我直接访问 http://localhost:8090/my_frontend_path从浏览器 golang 返回 404 page not found ，有没有办法委派 main 中不支持的任何路径？默认为前端 react 路由器？

Answer 1

您遇到的问题在 this question 的答案中有详细介绍。 .值得通读答案(尤其是 accepted one )，因为有多种选择(有不同的缺点)。
基本问题是当您向 http://localhost:8090/my_frontend_path 发出初始请求时您的前端 react 路由器未运行，因此浏览器从服务器请求页面；如my_frontend_path build 中不存在文件夹 http.FileServer返回 404 page not found错误。
我怀疑对您来说最简单的解决方案可能是使用哈希历史(在 the accepted answer 中介绍)。
但是，由于您提供了一些 Go 服务器端代码，因此有一个相当简单的纯服务器端选项。 “Catch-all”方法通过返回 index.html 起作用。 (以及您的应用程序)用于未在其他地方处理的任何路径。这意味着您的应用程序将被加载并且路由器应该检测到 my_frontend_path并采取相应的行动(这就是返回 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 then return if; 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 的内容如果文件不存在 - 这包括像 favicon.ico 这样的文件.如果这是一个问题，您可能需要添加一些限制(例如检查扩展名)。