带有数据获取的反应路由器的服务器端渲染答案

【问题标题】：server side render with react router with data fetch带有数据获取的反应路由器的服务器端渲染
【发布时间】：2016-04-08 07:57:33
【问题描述】：

我正在升级到 React Router 版本 1，无法让我的代码的数据获取端在服务器上工作，即初始服务器端渲染。

我要做的是根据所选路由从服务器获取数据。每个组件都有一个静态 fetchData 方法，以及一个全局数据方法，我构建数据然后传递到路由配置中定义的控制器视图组件。

我的代码如下：

match({routes, location: req.url}, (err, redirectLocation, renderProps) => {

  fetchData(renderProps).then((data) => {
      //page specific data
      return data;
    }).then((data) => {
      //global data
      getGlobalData().then((appData) => {

        data.app = appData;

        data = Immutable.fromJS(data);

        let templateLocals = {
          "data": data
        };    console.log('trying to render');
      templateLocals.content = renderToString(
    <RoutingContext {...renderProps} data={data}/>
  );
  res.send(layout(templateLocals));
    });

  });
});

我想像以前一样使用<Handler> pre V1.0 将我的数据作为道具传递到应用程序中（我可以看到数据是正确的，并且在我将其传递到 RoutingContext 组件时就在那里）。但是我从 RoutingContext 模块看到的是实现不允许这样做。它只获取 history,location,params,route,routeParams,routes 而不是任何 自定义道具。

服务器端渲染的例子还没有走到这一步，但我很想知道在升级时我应该如何处理这样的例子？

提前致谢

【问题讨论】：

你在使用 Redux 吗？弄清楚这一点并非易事，但如果您使用的是 Redux，我或许可以帮您一把。去过那里，做到了，一路上我可能会感到非常沮丧。
不，只是 react 和 react-router。在升级到 V1 之前，我的实现工作正常。对我来说似乎是一个相当常见的用例 - 但找不到任何示例！
+1 在这一点上确实缺少文档——这是一个超级常见的用例，并且在升级之前可以正常工作——我设法让它像我说的那样工作，但使用 Redux混合，所以它不会和你完全一样——即使有 this bug 这非常烦人......

标签： reactjs react-router

【解决方案1】：

如果您正在使用 Redux，请查看 https://github.com/Rezonans/redux-async-connect 它类似于 AsyncProps，但更适合使用 Redux 的项目

【讨论】：

【解决方案2】：

看看 async-props 存储库，它提供了一个示例和实用程序来处理这种同构的数据获取：https://github.com/rackt/async-props。

【讨论】：