React 路由与 Express 路由答案

【问题标题】：React Routing vs Express RoutingReact 路由与 Express 路由
【发布时间】：2017-10-07 07:25:08
【问题描述】：

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

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

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

谢谢

【问题讨论】：

标签： node.js express react-router

【解决方案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 数据。

【讨论】：