如何在 React.js 前端使用 Express 路由？

Question

我可以使用快速路由来发送页面内容吗？在经典 HTML 中，您可以：

app.get("/admin", (req, res) => {
  res.sendFile("admin.html"); // or res.render() for templating engines like EJS
});

很遗憾，我无法使用 Express 路由为 React 页面提供服务。我发现的唯一方法是使用 React Router，它在技术上可以完成工作，但是我不能在服务器端做任何其他事情，比如验证登录。我可以在技术上为此在服务器端创建一个 API 端点，然后在 React JSX 页面本身中请求它，但是，由于许多原因，这会很不方便：

1. 仅在页面之后发送请求，这意味着大量的加载指示和可能的问题，例如用户能够看到他根本看不到的内容。
2. 大多数“页面访问”API 请求都需要使用密钥保护，例如授权密钥
3. 如果 API 请求是在客户端的任何位置完成的，则密钥是不安全的，并且响应可以由用户手动更改，从而造成严重的安全违规。

如果有一个用于 Express 的 React 渲染器，您可以在其中直接从页面渲染一个 React JSX 文件（例如 res.render("page.jsx")），它会编译 React 并发送纯 HTML，那就太好了！但当然，我没能找到这样的，我怀疑有。

Answer 1

是的，您可以，但仅限于捆绑的应用程序。您只需发送您在 react 应用程序的 build 文件夹中找到的 index.html。

看起来像这样： 假设您表达 index.js 并且反应应用程序位于您的应用程序的“客户端”目录中。

  const path = require("path");
  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });