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

Question

使用react-router進行服務器端渲染本文檔不足以理解如何使用react-router 2在服務器端渲染具有不同類型的http請求的react組件，例如get，post和put等。

Answer 1

詳細編寫如何在服務器端渲染react＆react-router應用程序可能是一個很大的話題。

我將假設您是經驗豐富的用戶，並且您知道如何使用expressjs以及如何創建react＆react-router應用程序。

渲染服務器端時，您可以創建單獨的服務器路由器來映射每個前端路由，也可以創建一個將使用所有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) {...});

不要緊。

第二件事，我們不將瀏覽器歷史記錄用於react-router！ 我們必須使用內存歷史記錄。

您的歷史記錄對象：

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)
  });
});

在此示例中，您需要根據用戶url和請求方法填充initState。 並且您的應用應在開始使用該初始化數據。

如果使用redux，則服務器端渲染也可以像超級按鈕一樣工作。 因為我們有一個商店和一個初始化狀態對象。 然后，您可以在渲染任何基本值時進行傳遞。 例如，當渲染對象列表時，您將其放在前端並傳遞到init狀態，然后進行渲染。 然后，呈現的頁面將具有值。

我正在使用react + react-router + redux + redux-react-router + expressjs示例，它尚未完全就緒，但可以正常工作，您可以看到如何解決服務器渲染：

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