使用 react-router 的全局数据

Question

如何使用 react-router 为某些数据维护 central/global 对象？

假设我的 React 站点有 20 条不同的路由。这 20 条路由中有 15 条需要来自服务器的一个 JSON 几乎从不更改的文件。我讨厌为每个新 URL/route.

获取“/api/mydata”

我想我可以将数据保存在 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

嗯...如果你不想用redux或者flux，你可以在一个新的js文件中创建一个像这样的单例

let appState = {};
export default appState;

首先ajax将数据填充到这个单例中。然后将其导入到您想要数据的任何地方。

使用 react-router 的全局数据

Global data with react-router

javascript

single-page-application

reactjs

react-router