Question

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

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

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

这样做的原因是为了确保每个路由都可以实例化服务调用（来自定义的操作），以确保存储具有该路由所需的数据。在组件中执行此操作也是可能的，我们现在遇到的问题是同一路径中的多个组件需要相同的数据，这使得它多次从API请求数据，并且还会触发从这些调用中进入的每个结果的重新呈现。

Answer 1

你可以在React Router中通过在组件类中添加static（使用createClass）或属性（当使用ES6类时）然后使用React Router执行它们来执行类似的操作。 / p>

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）返回承诺：

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。）

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

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

将解析器添加到React-router

1 个答案: