React 路由与 Express 路由

Posted 2023-02-21

【中文标题】React 路由与 Express 路由

【英文标题】：React Routing vs Express Routing

【发布时间】：2017-10-07 07:25:08

【问题描述】：

看了很多教程，我发现有快速路由和反应路由。

是客户端的反应路由和服务器的节点js路由（api？）。

想知道是否有人可以将此作为 React、Node、Express 的新手来澄清。

谢谢

【参考方案1】：

我将尝试通过一个示例来解释差异。假设我们在 www.example.com 上有一个使用 react 构建的单页应用程序

反应路由

我们点击 www.example.com 并从服务器加载 index.html。请注意，它在您的 bundle.js 文件中包含您所有的反应页面。您现在单击导航栏上的 about 按钮，这会将您转到 www.example.com/about。此调用不会命中服务器，它由您的 react 路由器处理。

快递

很像上面我们访问 www.example.com 并获取索引。这次当我们点击 /about 时，我们会从服务器获取信息

看看这篇博文：https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc

【讨论】：

感谢您的解释。但是，我遇到了一个奇怪的问题。我的应用程序运行良好，除了最近我尝试添加社交登录。我可以登录我的本地主机，但在生产模式下，它似乎无法访问我的快速路由“/api/auth/google”，而是浏览器停留在example.com/api/auth/google。所以，react 没有转发这条路线来表达（或者表达在反应之前没有得到它？）。在客户端中，我使用

【参考方案2】：

可以（甚至推荐）结合使用它们。

TL;DR

react-router 用于在您的前端应用程序/网站的多个

页面/视图

之间导航。通常在动态加载页面的单页应用中。 express 路由器是一种返回静态内容（index.html、image.png...）和处理 api 调用服务器端通常触发数据库逻辑的方法。

示例

myapp.com/my-portfolio 是一个view，应该由react router

处理和渲染

// this router render pages component dynamically based on the url
<Route path="/my-portfolio" component=Portfolio />
<Route path="/page2" component=Page2 />

myapp.com/user/add 或 myapp.com/api/getMyJson 是一个 api 调用，应该由 express router 在服务器端处理：

// app.js
// api call that return json
app.get('/api/getMyJson', (req, res) => 
  res.send('"my_var":"value"');
);

// server call that return the content of folder app/public
app.use(express.static('app/public'))

单页应用程序工作流程

前端

（客户端浏览器）向

后端

（您的服务器）请求应用程序静态内容（myLogo.png、index.html... ) 通常由

express

路由器 提供服务 当第一个页面被加载并且用户开始与应用交互时，

前端

继续在后台加载其他页面（延迟加载） 当用户导航到另一个页面（使用

react-router

）时，该页面已经加载，用户无需任何进一步的服务器调用或页面重新加载即可到达那里 另一方面，express 路由器需要处理像 myapp.com/user/userId/get/notifications 这样的 api 调用来获取非“静态”的数据，如 json 数据。