1

在 react-router 中，有没有办法从 Route-definition 中传递一个可以在 Router.run 函数中获取的属性？我希望针对特定路线触发特定操作。可能是这样的：

<Route handler={someComponent} resolve={someAction} />

在Router.Run中，我想执行resolve中定义的给定动作。有没有办法做到这一点？

这样做的原因是为了确保每个路由都可以实例化服务调用（来自定义的操作），以确保商店拥有该路由所需的数据。在组件中这样做也是一种可能，我们现在遇到的问题是，同一路由中的多个组件需要相同的数据，使其多次从 API 请求数据，并且还会触发来自这些调用的每个结果的重新渲染.

4

1 回答 1

1

您可以在 React Router 中执行类似的操作，方法是在组件类上添加static（使用createClass）或属性（使用 ES6 类时），然后使用 React Router 执行它们。

var Component1 = React.createClass({
  statics: fetchData: function(params) {
    return API.getData(params);
  },

  // ...
});

class Component2 extends React.Component {
  // ...
}

Component2.fetchData = (params) => API.getData(params);

然后，当您运行路由器时，查找所有匹配的具有fetchData静态方法的路由并调用它。我们在这里假设fetchData（因此API.getData）返回一个 Promise：

Router.run(routes, function(Root, state) {
  var data = {};

  var routesWithFetchData = state.routes.filter(function (route) {
    return route.handler.fetchData
  });

  var allFetchDataPromises = routesWithFetchData.map(function (route) {
    return route.handler.fetchData(state.params).then(function (routeData) {
      data[route.name] = routeData;
    });
  });

 Promise.all(allFetchDataPromises).then(function() {
    React.render(<Root data={data} />, container);
  });
});

（有关更多详细信息，请参阅此 React Router 示例。）

您可以通过确保API模块将捕获对相同数据的请求并为它们分配相同的承诺来解决“多个组件获取相同的数据”问题。伪代码：

API = {
  getData: function(params) {
    if (requests[params]) {
      return requests[params];
    } else {
      request[params] = new Promise(function(resolve, reject) {
        // fetch data here
      });
    }
  }
};
于 2015-06-10T15:40:49.150 回答