如何在 React + React-Router 应用程序中从文件夹中获取 JSON 文件？答案

【问题标题】：How can I fetch JSON files from a folder, in a React + React-Router app?如何在 React + React-Router 应用程序中从文件夹中获取 JSON 文件？
【发布时间】：2017-02-06 17:11:42
【问题描述】：

我正在开发一个完全用 React.js 编写的网络应用程序。它建立在this 样板之上，并将部署在 apache 服务器上。

该应用程序使用 jQuery AJAX 向远程 API 发出 GET 和 POST 请求（结果为 JSONP 格式）。现在我需要获取存储在名为“./json”的“真实”文件夹（不是 react-router 路径）中的 JSON 文件。我该怎么做？

【问题讨论】：

只要您请求的文件与网页的来源相同（即该页面是从https://foo.bar 提供的并且您请求的是https://foo.bar/json/baz.json），您通常可以使用AJAX 只要服务器配置为提供这些文件。例如，如果您使用的是 node.js，则需要确保您实际上是通过 HTTP 提供 https://foo.bar/json/baz.json。编辑：哦，您使用的是 Apache——好吧，同样的故事，请确保 Apache 通过 HTTP 提供您的 JSON 文件。
我没有使用 httpS。 jQuery ajaxing 一个 JSON 文件（无论位于何处）总是返回 index.html 代码。
就像我上面所说的，您需要配置您的服务器以通过 HTTP 实际提供 JSON 文件。由于您使用的是 React，因此您的服务器可能已配置为以大多数 React 单页应用程序的方式将所有请求重定向到 index.html。事实上，看看你正在使用的样板，Node 就是这样做的。使用 AJAX 加载 JSON 显然在大多数情况下都有效，如果不是，则必须是服务器配置问题。 jsfiddle.net/_jered/e5zjqj0b

标签： json reactjs react-router

【解决方案1】：

您使用的样板可与 Node.js 和 express 一起使用。如果您希望它通过路由提供静态资产（即文件），那么您需要对其进行配置。

由于您的 JSON 文件位于它们自己的文件夹中，它可能看起来像这样：

app.use(express.static('json'));

【讨论】：

这帮助我实现了我的目标

【解决方案2】：

如果您是按照 Facebook 的“create-react-app”说明启动应用程序，请点击此处：https://facebook.github.io/react/docs/installation.html

然后我找到了一种简单的方法，可以从 URL 访问 JSON 文件，而无需 React 路由器妨碍并拦截请求。

您所要做的就是在“create-react-app”脚手架的 index.js 中，在第一行添加类似这样的内容：
import './myJsonFile.json';

就是这样，之后转到：http://localhost:3000/myJsonFile.json 将正确获取文件，而 React 路由器不会干扰查找。

【讨论】：