求助：如何使用React Router Loader获取本地JSON文件数据？

常见问题排查与解决方案 #

1. 确认JSON文件导入方式正确 #

不同打包工具的JSON导入规则略有区别：

• Vite环境直接导入即可：

  import blogData from './path/to/blogData.json'
  

• Create React App环境（新版已默认支持JSON导入），若出现问题可改用require：

  const blogData = require('./path/to/blogData.json')
  

2. 规范Loader函数的返回格式 #

React Router要求Loader返回可序列化的数据，推荐使用json()工具函数包裹本地JSON数据，避免解析异常：

import { json } from 'react-router-dom'
import blogData from './blogData.json'

export async function blogLoader() {
  return json(blogData)
}

3. 组件中正确读取Loader数据 #

确保在组件内通过useLoaderData()获取数据：

import { useLoaderData } from 'react-router-dom'

export function BlogPage() {
  const data = useLoaderData()
  // 打印数据确认是否加载成功
  console.log('Loader数据:', data)
  return (
    <div>
      {/* 渲染JSON数据内容 */}
    </div>
  )
}

4. 校验本地JSON文件格式 #

检查JSON文件是否存在语法错误（比如逗号遗漏、引号不匹配），格式非法会导致导入失败。

完整可运行示例 #

// 本地JSON文件：src/data/blogs.json
{
  "list": [
    { "id": 1, "title": "React Router 入门", "content": "Loader使用指南" },
    { "id": 2, "title": "本地JSON加载", "content": "避免踩坑技巧" }
  ]
}

// 路由组件：src/routes/Blog.jsx
import { json, useLoaderData } from 'react-router-dom'
import blogData from '../data/blogs.json'

export async function blogLoader() {
  return json(blogData)
}

export default function Blog() {
  const { list } = useLoaderData()
  return (
    <div className="blog-list">
      {list.map(blog => (
        <article key={blog.id}>
          <h2>{blog.title}</h2>
          <p>{blog.content}</p>
        </article>
      ))}
    </div>
  )
}

// 路由配置：src/App.jsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Blog, { blogLoader } from './routes/Blog'

const router = createBrowserRouter([
  {
    path: '/blogs',
    element: <Blog />,
    loader: blogLoader
  }
])

function App() {
  return <RouterProvider router={router} />
}

export default App

内容的提问来源于stack exchange，提问作者Muhammad Rayhan