React Routing vs Express Routing

Question

是客户端的react路由和服务器的节点js路由(api?)。

想知道是否有人可以澄清这是新的反应，节点，快递。

谢谢

Answer 1

可以(甚至推荐)在中同时使用这两种方法。

TL;DR

• react-router用于在前端应用程序/网站的多个页面/视图之间导航。通常在单页应用程序中，加载页面的路由器是返回静态内容(index.html、image.png...)的一种方式。并处理服务器端通常触发数据库逻辑的应用编程接口调用。

示例

myapp.com/my-portfolio是视图路由器，应由react 处理和呈现

// 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路由器在服务器端处理。

// 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 router
• 提供服务当第一个页面加载并且用户开始与应用程序交互时，前端在后台继续加载其他页面(lazy loading)
• When用户导航到另一个页面(使用react-router)，，页面已经加载，用户被带到那里，而无需任何进一步的服务器调用或页面重新加载
• 另一方面，express路由器需要处理像myapp.com/user/userId/get/notifications这样的api调用，以获取不像json数据那样的“静态”数据。<代码>H244<代码>F245

Answer 2

我将尝试通过一个例子来解释其中的区别。假设我们有一个在www.example.com使用react构建的单页面应用程序

React路由

我们点击www.example.com，从服务器加载index.html。请注意，它将所有react页面都包含在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