将解析器添加到 React-router

Question

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

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

在 Router.Run 中，我想执行在 resolve 中定义的给定操作。有什么办法吗？

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

Answer 1

您可以在 React Router 中通过在组件 class 上添加 static（使用 createClass）或属性（使用 ES6 classes) 然后用 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）returns 一个 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);
  });
});

（有关详细信息，请参阅 this React Router example。）

您可以通过确保 API 模块捕获对相同数据的请求并为它们分配相同的承诺来解决 "multiple components fetch the same data" 问题。伪代码：

API = {
  getData: function(params) {
    if (requests[params]) {
      return requests[params];
    } else {
      request[params] = new Promise(function(resolve, reject) {
        // fetch data here
      });
    }
  }
};

将解析器添加到 React-router

Adding resolver to React-router

reactjs

react-router

refluxjs