Express 和 React Routes 如何处理来自浏览器的初始 GET 请求？

Question

我对反应世界和整个全栈世界都是新手，但我一直在无休止地寻找以下问题的答案，并且非常感谢一些指导。

我正在使用 React 和 Express 创建一个应用程序。它需要身份验证，因此我计划使用 Passport 来提供帮助。客户端 JS 使用 React Routers 来浏览网站。一切都很好，但我的问题是浏览器发出的初始 GET 请求。

我将首先描述我的具体应用程序要求，然后概括我不明白的内容。

正如我所说，我的应用程序需要 OAuth2 身份验证。如果您尝试获取我网站上的路径并且您尚未登录，则它应该只加载登录页面。如果您已登录，则正常加载并找到您的路径。与 Facebook 类似，我希望登录 URL 与“提要”页面相同。与 facebook.com '/' 路由是登录页面或新提要（取决于您是否登录）类似，我想要同样的东西。

据我了解，Passport 通过检查请求标头在后端进行身份验证。所以我知道我应该有某种中间件，它说“如果用户已登录，则继续沿着路线前进，否则呈现登录页面”......这是如何完成的？代码会是什么样子？我对 Express 的唯一体验是来自一个介绍类，该类使用 res.render 发送回 HTML 文件并将其传递给一些模板引擎（如车把）。但我不知道它如何与反应路线一起工作。我还会使用 res.render() 吗？还有别的事吗？

假设我的index.html 具有要注入react 的根div。如果我不得不猜测，我会发送回带有 .js 文件和路由的 index.html 页面，并以某种方式在后端发送回我希望它与我的反应路由匹配的路由（登录路由或用户路由）要求）？？

更一般地说，我想我只是对如何使用反应路由完成对网站的初始请求感到困惑。1）服务器如何与所有内容交互以呈现我所要求的内容？2）代码会是什么样的？我对 React 的唯一体验来自基本的 Udemy 课程，该课程仅使用“react-scripts start”来渲染页面。

在花了一整天的时间谷歌搜索这个问题之后，它把我引向了 SSR，它本身就是一个兔子洞，我什至不确定它是否是我需要帮助的。是吗？

我显然缺少一些基础知识，因为这真的让我很困惑，所以如果您有任何资源来了解更多信息，只需发布​​它们即可。谢谢！

Answer 1

我理解您的挣扎，因为在将前端与后端（特别是 React 和 Node）相结合时，我必须亲自经历它。首先，我们知道浏览器/客户端总是会向服务器发起请求，那么React Router是如何控制路由的呢？其实很简单，您所要做的就是从 Express 服务器的任何路由返回整个 React 应用程序。代码看起来像这样：

const express = require('express');
const app = express();

app.get('/*', (req, res, next) => {
  // Return React App index.html
});

app.listen(3000);

一旦 React 应用程序在用户浏览器上呈现（不用担心路径，因为 React 会根据您在客户端编写的代码根据 URL 自动呈现），它还会处理身份验证与提要页面。扫描您的本地存储、cookie 等），它将控制路由，而不是向 Express 服务器发送请求。但是，当我们从服务器请求数据时会发生什么，它会在每个路由上返回 React 应用程序，因此我们需要设置一个 api 路由来处理任何数据请求。

app.get('/api/v1/*', (req, res, next) {
  // Return some data in json format 
});

希望这能让您深入了解您正在寻找的内容。