javascript - 如何使用react-router 2作为expressjs的服务器端路由？

Question

Server side rendering with react-router 本文档不足以理解如何使用react-router 2在服务器端渲染具有不同类型http请求(如get、post、put等)的React组件。

Answer 1

详细编写如何在服务器端渲染 React 和 React-router 应用程序可能是一个很大的话题。

我假设您是经验丰富的用户，并且知道如何使用expressjs以及如何创建react和react-router应用程序。

当您渲染服务器端时，您可以创建单独的服务器路由器来映射每个前端路由或创建一个将获取所有 url 的服务器路由器。

后一种情况只需要一个服务器路由器。 在服务器路由器底部的某个位置(在错误路由之前)写入:

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

该路由将捕获所有网址。

首先我们需要有关 url 的信息。我们不需要有关协议(protocol)或域的信息，因此我们只需要这个:

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 路由器的浏览器历史记录!我们必须使用内存历史。

您的历史对象:

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，服务器端渲染也可以像魅力一样工作。因为我们有一个 store 和一个 init 状态对象。然后，您可以在渲染期间传递任何基本值。 例如，当您渲染对象列表时，您将其放入前端并传递到初始化状态，然后渲染。然后渲染的页面就会有值。

我正在使用react+react-router+redux+redux-react-router+expressjs示例，它还没有完全准备好，但是可以工作，你可以看到我如何解决服务器渲染:

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