如何使用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