时间戳

首页 > 解决方案 > 如何在 React.js 前端使用 Express 路由？

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

问题描述

我可以使用 Express 路由来发送页面内容吗？在经典 HTML 中，您可以执行以下操作：

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

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

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

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

标签： reactjsexpressreact-router

解决方案

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

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

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

推荐阅读