使用 create-react-app 和 express.js 制作一个多页面应用程序答案

【问题标题】：Make a multi-page app with create-react-app and express.js使用 create-react-app 和 express.js 制作一个多页面应用程序
【发布时间】：2022-01-18 13:05:23
【问题描述】：

我最喜欢做后端工作。我曾经做过很多反应，但我已经有一年没有碰它了，也许更多。现在最近我开始了一个项目，需要我清理我生疏的前端编程技能。

我知道我以前做过这个，但我不太记得我是如何制作多个页面的。我知道我遵循了本教程：https://dev.to/loujaybee/using-create-react-app-with-express，基本上我所做的是：

运行 create-react-app 并安装 express.js
做一些前端工作，然后使用 npm run build 来构建它。
继续从我的 server.js '/' 节点中的 react 构建中提供 index.html 文件。

但如果我想处理多个页面，我完全忘记了我必须做什么。所以我想这是我的问题：如果我想为另一条路线提供不同的文件（让我们以'/browse'为例），我该怎么做？

提前感谢您的帮助！

【问题讨论】：

最大的问题是 /browse 路由是否也应该由您的 React 前端呈现。如果不是，您只需将app.get('/browse', ...) 添加到您的快递应用程序中，并提供您喜欢的任何内容作为回应。如果您确实想处理 React 应用程序中的所有 URL，则必须使用 react-router 来处理导航方面，并确保 express 始终使用 app.get('*', ...) 处理程序为（单个）反应应用程序提供服务。
我明白了，如果我需要从我的数据库中获取一些东西。我将如何去做。就像我想从我的服务器上的 react 路由“/home”获取一系列博客文章。我认为我无法在同一条路线上向我的 express 服务器发出 fetch 请求？
在开发过程中，您将使用单独的服务器进行 React 热重载（如 localhost:3000）和您的快速后端（如 localhost:4000）。你仍然可以在你的 react 代码中简单地执行 fetch("/api/blogposts")，但如果你将 "proxy": "localhost:4000" 添加到你的 react 应用程序的 package.json 中。现在您只需要设置 express 以便它首先处理所有 /api/* 路由，然后 * 为所有剩余路由提供您的 react 应用程序索引。完成后，构建 react 应用并将其移动到 express 服务器的公共文件夹中。
哦，非常感谢！我回家后会试试看！非常感谢你的帮助。最后一个问题：我应该把那一行放在 package.json 的什么地方？
不客气 :) 把它放在顶层的任何地方。

标签： javascript node.js reactjs express

【解决方案1】：

我通读了该教程，也许它会帮助您详细说明发生了什么。

第 1 部分：制作和服务网站

将使用 create-react-app 创建的网站与使用 express 创建的服务器分开。

Create-react-app 将为您引导一个 react 项目。有一个开发服务器构建，您可以在开发组件时使用它。此开发服务器将尝试从 localhost:3000 为您的开发中网站提供服务。

当您运行脚本“build”时，一个名为 webpack 的捆绑器也包含在使用 create-react-app 引导时，它将获取您的所有组件和东西并制作一组静态文件。这些文件，包括“index.html”和一些 javascript 文件，构成了您的网站。当人们在使用像 webpack 或 rollup 这样的“捆绑器”的上下文中谈论“捆绑”和“构建”时，他们的意思是一样的：你的反应文件将被压缩成一个（或几个），这将包含你所有的东西。

Express 是一个帮助您使用 node.js 制作服务器的库。您创建的服务器可以侦听特定端口和路由（例如 localhost:8080），并在请求时提供您现在构建的网站文件。

现在，您的网站可能需要资源，例如联系人列表或其他任何内容（例如某种 JSON 或其他内容），并会向它们发出请求。如果您计划通过您的 express 服务器（在我们的示例中为端口 8080）提供它们，它们将不会来自与 dev-server 正在运行的相同端口（在我们的示例中为端口 3000）。这将导致 CORS 错误，这可能会让您感到沮丧。 Create-react-app 允许您在 package.json 中定义一个“代理”，以允许在使用开发服务器时请求这些资源。

因此，在您捆绑您的网站后，它可以作为静态资源从您的快速服务器选择的任何路径中提供。 express 服务器也可以在不同的路由上提供资源，您的网站可以通过使用一些请求机制（例如 fetch）来使用它。除了 window.fetch 之外，还有很多不同的客户端可以处理此类请求，例如 axios，您可以货比三家找到自己喜欢的。

第 2 部分：不同的页面

有几种方法可以实现这一点。在过去，唯一的方法是为每个页面设置不同的 html 文件，并让浏览器将它们作为一个全新的网页来请求。这些 html 的作者必须确保每一个都具有相似的外观和感觉。

你仍然可以通过 react 来做到这一点。只需启动多个 create-react-app 项目，将它们全部构建并让您的服务器在不同的路由上为它们提供服务。

但是有一个更简单的方法！ React 和 create-react-app 非常适合所谓的“单页应用程序”。您可以在 react 应用程序中处理所有路由。 URL 会发生变化，一切都会发生变化，但您仍停留在同一页面上。唯一改变的是正在渲染的组件。如果你在你的 react 应用中定义了路由“/home”、“/contact”和“about”，你可以决定应该在那里渲染哪些组件。基本上，它变成了一个 switch/case 语句。如果您愿意，您可以在此语句之外呈现一些内容，例如标题。就像上面建议的那样，react-router 是一个非常常见的选择。如果你查看 code-splitting 和 react.lazy 下的 react 文档，你会发现更多关于如何优化这类东西的性能。

另一种选择是使用 next.js 而不是 create-react-app 来引导您的项目。这意味着设置与教程建议的设置略有不同，但仍然完全易于遵循。在这里，不同的页面被定义在一个“pages”文件夹下，next.js 会在服务器端渲染。

请注意，“单页应用程序”仍将通过您服务器上的单个路由、不同页面以及所有页面提供服务。

还有很多其他的选择，如果你想修修补补，我可以热情地建议你研究一下 webpacks 模块联合插件，这很有趣！

【讨论】：

【解决方案2】：

在前端使用 react-router 来路由不同的页面

<BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="about" element={<About/>} />
        <Route path="contact" element={<Contact/>} />
      </Route>
    </Routes>
  </BrowserRouter>

阅读完整的 react-router 文档here

【讨论】：

我去看看。那如何让我提供后端服务呢？如果我想发出一个获取联系的请求（愚蠢的例子，但无论如何），并从我的服务器提供一些数据库内容。考虑到路径已被反应路由器使用，我怎么能这样做？
@RoseGoldenHeart 如果您想从后端获取一些数据，您可以使用 axios 在组件调用的 useEffect 中调用 request 或获取并获取数据在前端提供服务应用端
好的，我应该将获取请求调用到哪里？因为反应路由器正在使用我通常会处理获取请求的路由？只是另辟一条路线，让我从我的服务器提供数据？