如何使用react-router 2作爲expressjs的服務器端路由？

Question

Server side rendering with react-router本文檔不足以理解如何使用react-router 2在服務器端使用不同類型的http請求（如get，post，put等）來呈現響應組件。在細節

Answer 1

寫作如何服務器端渲染反應&反應路由器的應用可能是非常大的話題。

我會認爲你是有經驗的用戶，你知道如何使用expressjs以及如何創建反應&反應路由器應用程序。

在渲染服務器端，您可以創建單獨的服務器路由器映射每個前端路徑或創建一個將採取所有URL。

後一種情況只需要一臺服務器路由器。 某處在您的服務器的路由器的底部（之前的錯誤路線）寫：

app.use('/*', function(req, res){ ... }); 

這條線路將捕獲的所有URL。

首先，我們需要關於網址的信息。我們不需要有關協議或域信息，因此我們只需要這樣：

var url = req.originalUrl; 

關於方法的信息（POST，GET，PUT，DELETE），我們從獲得：

var method = req. method 

如果你想你可以做出不同的路線，你將有：

app.post('/something', function(req, res) {...}); 
app.get('/something', function(req, res) {...}); 

沒關係。

第二件事，我們不使用瀏覽器歷史記錄作爲反應路由器！我們必須使用記憶歷史。

你的歷史記錄對象：

var history = createMemoryHistory(req.originalUrl || '/'); 

你傳遞的歷史對象路由器。

我喜歡創建我的根組件作爲參數歷史對象接受。 當我在前端使用它時，我傳遞了瀏覽器歷史記錄，並且當我在服務器渲染中使用它時，我傳遞了內存歷史記錄。

下面很簡單的例子服務器端渲染路徑如何能期待 （我還用EJS模板）：

router.use('/*', function(req, res){ 
    var history = createMemoryHistory(req.originalUrl || '/'); 
    var initialState = {}; 
    //do something with initialState according to url and request method 
    var staticHTML = ReactDOMServer.renderToString(
    React.createFactory(App)({ 
     history, 
     initialState 
    }) 
); 

    res.render('index', { 
    staticHTML, 
    initialState: JSON.stringify(initialState) 
    }); 
}); 

在這個例子中，你需要根據用戶的網址，並要求方法來填充INITSTATE。你的應用程序應該開始使用該init數據。

如果您使用redux，服務器端渲染也可以像魅力一樣工作。因爲我們有一個存儲和一個init狀態對象。然後您可以在渲染任何基本值期間通過。 例如，當您渲染對象列表時，您將其放入前端並傳遞到init狀態，然後進行渲染。然後呈現的頁面將具有值。

我在工作中反應+反應路由器+終極版+終極版反應的路由器+ expressjs例如，它不完全準備好，但工作的，你可以看到我是如何解決服務器渲染：

https://github.com/uhlryk/my-express-react-seed