使用react-router的全局数据

Question

如何使用react-router维护某些数据的中心/全局对象？

我们说我的React网站有20条不同的路线。这20条路线中的15条需要一个来自服务器的JSON文件，几乎不会发生变化。我讨厌GET＆＃34; / api / mydata＆＃34;对于每个新的URL /路由。

我想我可以将数据保存在React's context中，但这看起来很糟糕，甚至可能无法正常工作。在react-router组件之间共享数据是否有更优雅的解决方案？

编辑：我通过创建Data.js文件部分解决了这个问题：

export var myData = function(cb) {
  ajax('GET', '/api/mydata', resp => {
    myData = function() {
      return cb(resp);
    };
    cb(resp);
  });
};

并像这样使用它：

myData(data => data.map(/* ...use the data */));

这样可以保证每个生命周期只获取一次数据。

Answer 1

Arrr ...如果您不想使用redux或flux，可以在新的js文件中创建这样的单例

let appState = {};
export default appState;

首先执行ajax将数据填充到此单例中。然后将其导入到您想要数据的任何位置。