React中useLoaderData报错‘必须在数据路由器中使用’的适配方案

你遇到的问题根源很明确：loader和useLoaderData是React Router v6.4+推出的数据路由（Data Router）专属特性，而你当前用的BrowserRouter属于传统客户端路由器，完全不支持这些API。要解决这个问题，需要把路由系统切换到数据路由器方案。

修改步骤 #

1. 替换路由导入项
   从react-router-dom中导入createBrowserRouter和RouterProvider，替代原来的BrowserRouter、Routes、Route。

2. 重构路由配置为对象数组
   把原来的JSX格式路由改成数组对象结构，每个路由用对象定义，嵌套路由通过children字段声明，loader直接挂载到对应路由对象上。

3. 用RouterProvider渲染路由
   用RouterProvider组件包裹整个路由系统，传入创建好的router实例。

修改后的完整代码 #

路由配置文件（比如App.js）

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Header from './Header';
import Home from './Home';
import About from './About';
import Services from './Services';
import WebServices from './WebServices';
import AppServices from './AppServices';
import CloudServices from './CloudServices';
import Blog from './Blog';
import Page404 from './Page404';

// 示例fetchPosts函数（根据你的实际API调整）
async function fetchPosts() {
  const response = await fetch('你的博客API地址');
  if (!response.ok) {
    throw new Response("加载博客失败", { status: 404 });
  }
  return response.json();
}

// 创建数据路由器实例
const router = createBrowserRouter([
  {
    // 全局共享的Header组件，通过嵌套路由实现全局渲染
    element: <Header />,
    children: [
      { path: '/', element: <Home /> },
      { path: '/about', element: <About /> },
      {
        path: '/services',
        element: <Services />,
        children: [
          { index: true, element: <WebServices /> },
          { path: 'web', element: <WebServices /> },
          { path: 'app', element: <AppServices /> },
          { path: 'cloud', element: <CloudServices /> },
        ],
      },
      { path: '/blog', element: <Blog />, loader: fetchPosts },
      { path: '*', element: <Page404 /> },
    ],
  },
]);

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

export default App;

Blog组件（无需修改，保持原样即可）

function Blog(props) {
  const list = useLoaderData();

  return (
    <div className='blog-container'>
      <div className='container'>
        <h1>Your Blog comes here</h1>
      </div>
      <div className='blog-post-container'>
        {list && list.length > 0
          ? list.map((item, index) => {
              return (
                <div className='blog-card' key={index}></div>
              )
            }) : <p>No post found</p>
        }
      </div>
    </div>
  )
}

额外注意事项 #

• 确保你的React Router版本≥v6.4，若版本过低，执行npm install react-router-dom@latest升级。
• 嵌套路由的父组件（比如Services）需要添加<Outlet />组件，否则子路由的内容无法渲染到页面上。

内容的提问来源于stack exchange，提问作者Pranay kumar