如何使用React Router loader函数或hook从JSON文件中获取数据？

Question

我可以使用react router loader从给定的外部API获取数据，但我无法使用react router loader直接从json文件获取数据。我尝试了多次但失败了。请帮助我。

我首先将json文件导入为blogData。

然后我尝试将它使用到加载器功能中，但它不起作用。

我得到了这个输出：

Answer 1

如果 JSON 文件与代码捆绑在一起并被导入，则只需从加载函数返回

blogData

即可。

import Blog from './components/Blog/Blog';
import blogData from './blogData.json';

...

{
  path: "/blogs",
  loader: () => blogData,
  element: <Blog />,
},

更好的是，由于您也不需要真正加载任何内容，因此路由组件应该/可以直接导入

blogData

。

...
import blogData from '../blogData.json';

const Blogs = () => {
  ...

  // use blogData

  ...
};