How do I maintain a central/global object for some data with react-router?
Let's say my React site has 20 different routes. 15 out of those 20 routes need one JSON file from the server that almost never changes. I hate having to GET "/api/mydata" for every new URL/route.
I guess I can save the data in React's context, but that seems hacky and may not even work. Is there a more elegant solution for sharing data between react-router components?
Edit: I partially solved this by creating a Data.js file:
export var myData = function(cb) {
ajax('GET', '/api/mydata', resp => {
myData = function() {
return cb(resp);
};
cb(resp);
});
};
and use it like this:
myData(data => data.map(/* ...use the data */));
That way the data is guaranteed to only be fetched once per lifecycle.