服務器端和客戶端的路由 - React.js＆Node.js

我試圖真正理解路由如何與我的反應應用程序上的react-router一起工作，並在我的node.js服務器上表達。服務器端和客戶端的路由 - React.js＆Node.js

陣營路由器代碼：

import .. 
import { Router, Route, IndexRoute, hashHistory, IndexRedirect, Redirect } from "react-router"; 

render(
    <Router history={hashHistory}> 
    <Redirect from="/" to="/index"/> 
    <Route path="/" component={App}> 
     <IndexRoute component={NavBarTop} /> 
     <IndexRoute component={NavFilter} /> 
     <Route path="/index" component={Tickets} /> 
     <Route path="/ticket/:id" component={TicketInformations} /> 
     <IndexRoute component={InterventionsList} /> 
    </Route> 
    </Router>, 
document.getElementById('container'));

我的服務器路由：

app.use('/', express.static(path.join(__dirname, '../client/')), function(res, eq) { 
}); 

app.get('/test', function (req, res) { 
    console.log("test"); 
    var data = getTickets(); // return a JSON 
    res.end(data); 
});

我的反應路徑完美的作品，但是我希望做一個AJAX調用，以填補我的部件。爲此，我嘗試從我的節點服務器獲取JSON。然而，路徑「測試」不起作用。我的console.log沒有被調用。

我不知道爲什麼，我可能不知道它是如何工作的。如何輕鬆創建web服務來準備我的AJAX調用？

來源

2016-05-26 onedkr

哪裏是通話「/測試」？ – sundar

在我的節點路由'app.get（'/ test'）' – onedkr

你必須從你的客戶端應用程序調用該API。另一個不會被稱爲 – sundar

ReactJS應用程序是express.js服務器的單頁應用（SPA ）和，他們一般是從根擔任（「/」）。但是，與不同，任何靜態網頁，SPA都不會爲每個路由更改調用服務器，而取決於虛擬路由以及它自己的客戶端路由處理程序。（如果你想知道，爲什麼SPA不刷新頁面，這是背後的原因，有點）。如果SPA使用其客戶端路由處理程序中定義的任何路由，則表示將始終將其視爲根路由「/」而什麼都不做，實際上它什麼也不知道，因爲瀏覽器不會做任何事情任何請求。

陣營-路由器提供這些虛擬路由到ReactJS應用程序。

在你的代碼，當你作出反應的應用程序從「/」到「/指數」雲或定義的任何其它途徑使用陣營，路由器，它不要求表達服務器的任何信息，而一切都通過客戶端/瀏覽器完成。這就是爲什麼，即使你的路由被定義爲「/ test」對於ReactJS，它不會爲服務器端調用任何東西。

（順便說一句，這些虛擬路線也將使用陣營在服務器端，當且僅當你使用陣營的服務器端渲染。但是，快遞不會知道這些。快遞將始終具有相同的行爲，無論您使用客戶端呈現或服務器端渲染。）

現在，最後，如果你希望你的表達路線「/ test」被調用，您將不得不向提取對該路由的請求，因此路由將被調用。（看看isomorphic-fetch，如果想使用哪個庫）

希望這些來方便

來源

2016-05-26 14:33:36

非常感謝您的答案！現在一切都很清楚。事實上，我必須在我的AJAX調用中調用一個url來填充我的組件，我想象這個解決方案（我的服務器中的路由「/ test」）。我會測試同構取指。然而，這是在反應思維中做好事的好方法嗎？ – onedkr

您能否詳細說明您的問題，我的意思是，您要求成爲一種好方法的方式是什麼？ –

事實上，我正在尋找一種好方法來填充我的反應組件，並將數據存儲在我的Mysql數據庫中。我雖然那個AJAX電話是一個好方法。所以在我的客戶端，我從我的服務器調用了一個URL，我返回一個JSON。然而，我急於開始關注流量架構。我有點失落，所以我問你是否認爲在componentWillMount中調用AJAX調用是一種在通用架構中獲取數據的反應思維方式？通過同構獲取從我的服務器調用URL看起來很奇怪。我覺得這不是自然的...... – onedkr

服務器端和客戶端的路由 - React.js＆Node.js

回答

相關問題