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

How to use react-router 2 as server side routing with expressjs?

本文关键字：服务器端 路由 expressjs 作为 何使用 react-router      更新时间：2023-09-26
使用 react-router

进行服务器端渲染 本文档不足以理解如何使用 react-router 2 在服务器端渲染具有不同类型的 http 请求（如 get、post 、put 等）的反应组件。

详细编写服务器端渲染 react 和 react-router 应用程序可能是一个非常大的话题。

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

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

后一种情况只需要一个服务器路由器。在服务器路由器底部的某个地方（在错误路由之前）写：

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

此路由将捕获所有 URL。

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

var url = req.originalUrl;

有关方法（发布，获取，放置，删除）的信息，我们从以下位置获得：

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

在此示例中，您需要根据用户 url 和请求方法填充 initState。你的应用应该在开始使用该初始化数据时。

如果使用 redux，服务器端渲染也可以像魅力一样工作。因为我们有一个存储和一个初始化状态对象。然后，您可以在渲染期间传递任何基本值。例如，当您渲染对象列表时，您将它放在前端并传递到 init 状态，然后渲染。然后呈现的页面将具有值。

我正在 react+react-router + redux+redux-react-router+expressjs 示例中工作，它还没有完全准备好但可以工作，您可以看到我如何解决服务器渲染问题：

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

相关文章：