反應路由與快速路由

Question

看了很多教程，我看到有快速路由和反應路由。

是客戶端的反應路由和服務器（api？）的節點 js 路由。

想知道是否有人可以將其澄清為 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是一個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 router 需要處理像myapp.com/user/userId/get/notifications這樣的 api 調用來獲取像 json 數據那樣不是“靜態”的數據。

Answer 2

我將嘗試通過一個例子來解釋差異。 假設我們在 www.example.com 上有一個使用 react 構建的單頁應用程序

反應路由

我們點擊 www.example.com 並從服務器加載 index.html。 請注意，它在您的 bundle.js 文件中包含您所有的反應頁面。 您現在單擊導航欄上的關於按鈕，這會將您發送到 www.example.com/about。 此調用不會訪問服務器，它由您的 React 路由器處理。

表達

就像上面一樣，我們點擊 www.example.com 並獲取索引。 這次當我們點擊 /about 時，我們會從服務器獲取信息

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