React useLoaderData()始终返回undefined，如何在组件中获取loader返回值？

嘿，我来帮你看看这个问题！你能拿到param id但useLoaderData()一直返回undefined，大概率是没踩对React Router数据路由的使用要求，我给你列几个关键排查点和解决办法：

1. 确认你用的是React Router v6.4+的「数据路由」方案 #

loader是React Router v6.4之后才推出的数据路由特性，它只在使用createBrowserRouter配合RouterProvider的模式下才会生效。如果你还是用传统的<BrowserRouter>包裹路由，loader函数根本不会执行，自然useLoaderData()拿不到任何值。

你需要把路由配置改成这种方式：

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Mi from './Mi';
import User from './User';

// 用createBrowserRouter创建路由实例
const router = createBrowserRouter([
  {
    path: "/",
    element: <Mi />,
    children: [
      {
        path: "/:id",
        loader: async ({ params }) => {
          console.log("loader已执行，params：", params); // 加个日志确认loader跑了
          return "WHY NOT WORKING";
        },
        element: <User />,
      },
    ],
  },
]);

function App() {
  // 用RouterProvider提供路由
  return <RouterProvider router={router} />;
}

export default App;

2. 确保User组件是通过路由自动渲染的 #

如果你的Mi组件里是手动渲染<User />（比如直接写<User id={xxx} />），那这种方式渲染的组件是拿不到loader数据的。子路由的组件必须通过<Outlet />来渲染，这样路由系统才会把loader的数据关联到组件上。

把你的Mi组件改成这样：

import { Outlet } from 'react-router-dom';

export default function Mi() {
  return (
    <div>
      {/* 用Outlet渲染匹配到的子路由组件（也就是User） */}
      <Outlet />
    </div>
  );
}

3. 验证loader是否真的执行了 #

可以在loader函数里加个console.log（像我上面代码里写的那样），如果打开控制台看不到这个日志，说明loader根本没触发，那你就得回到第一点，检查是不是路由配置的模式错了。

只要loader正常执行，你在User组件里调用useLoaderData()就能拿到返回的字符串"WHY NOT WORKING"了，不需要额外传参数，你的User组件代码本身是没问题的。

备注：内容来源于stack exchange，提问作者chichi