反应路由与快速路由

Question

一直在看很多教程,我看到有快速路由以及反应路由.

是客户端的反应路由和服务器的节点js路由(api？).

想要知道是否有人可以将此作为React,Node,Express的新内容澄清.

谢谢

Answer 1

可以（甚至推荐）将两者结合使用。

TL; 博士

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

例子

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

// 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是应该由express router在服务器端处理的api 调用：

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

单页应用程序工作流

• 在前端（客户端浏览器）请求后端（服务器）的应用程序的静态内容（myLogo.png，index.html的...）通常是由提供服务快递路由器
• 当第一个页面加载完毕，用户开始与应用交互时，前端继续在后台加载其他页面（延迟加载）
• 当用户导航到另一个页面（使用react-router）时，该页面已经加载并且用户被带到那里而无需任何进一步的服务器调用或页面重新加载
• 另一方面，express router 需要处理 api 调用，比如myapp.com/user/userId/get/notifications获取非“静态”数据，如 json 数据。

Answer 2

我将尝试通过一个例子解释差异.假设我们在www.example.com上建立了一个带有反应的单页面应用程序

反应路由

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

表达

就像上面一样,我们点击www.example.com并获得索引.这次我们点击/关于我们从服务器获取信息

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