Question

Server side rendering with react-router 此文档不足以理解如何使用react-router 2在服务器端使用不同类型的http请求（如get，post，put等）呈现反应组件。

Answer 1

详细说明如何进行服务器端渲染反应＆amp; react-router应用程序可能是一个非常大的话题。

我将假设您是经验丰富的用户，并且您知道如何使用expressjs以及如何创建反应＆amp; react-router app。

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

后期案例只需要一台服务器路由器。在服务器路由器底部的某处（错误路由之前）写：

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

此路线将捕获所有网址。

首先，我们需要有关网址的信息。我们不需要有关协议或域的信息，因此我们只需要这个：

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 || '/');

然后将历史记录对象传递给路由器。

我喜欢创建我的根组件以接受param历史对象。当我在前端使用它时，我会传递浏览器历史记录，当我在服务器渲染中使用它时，我会传递内存历史记录。

下面非常简单的示例服务器端渲染路径的外观（我也使用了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状态对象。然后，您可以在渲染任何基本值期间传递。例如，当您渲染对象列表时，您将其置于前端并传递到init状态然后渲染。然后呈现的页面将具有值。

我正在使用react + react-routers + redux + redux-react-router + expressjs的例子，它还没有完全准备就可以工作，你可以看到我如何解决服务器渲染问题：

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

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

1 个答案: