React Router 6中如何向loader传参并让组件获取返回数据？

你遇到的核心问题是之前的loader绑定方式有误——如果直接把loaderHome(filmsPerPage)赋值给loader，相当于立刻执行了loader函数，把返回值（比如Promise）传给了路由的loader属性，但React Router需要的是一个函数，这才导致useLoaderData返回null。

下面是两种靠谱的解决方式：

方式一：闭包封装loader（最直接） #

把filmsPerPage定义在loader外层，利用JS闭包让loader函数直接访问到这个变量，同时直接把这个loader函数绑定给路由的loader属性：

// 仅定义一次的变量
const filmsPerPage = 10;

// 闭包访问filmsPerPage的loader函数
const homeLoader = () => {
  // 直接使用外层的filmsPerPage参数
  return fetch(`/api/films?limit=${filmsPerPage}`)
    .then(res => res.json())
    .catch(err => console.error(err));
};

// 路由配置
const router = createBrowserRouter([
  {
    path: "/",
    // 给Home组件传递props
    element: <Home filmsPerPage={filmsPerPage} />,
    // 直接绑定loader函数，由React Router自动调用
    loader: homeLoader,
  },
]);

这样操作后：

• loader能正常拿到filmsPerPage参数发起请求
• Home组件通过props接收filmsPerPage
• useLoaderData()能正确获取loader返回的数据

方式二：路由配置存额外参数 #

如果需要把参数和路由配置绑定，可以在路由里加extra字段，然后在loader里通过context获取：

const filmsPerPage = 10;

const homeLoader = ({ context }) => {
  // 从路由配置的extra中取出参数
  const pageSize = context.router.route.extra.filmsPerPage;
  return fetch(`/api/films?limit=${pageSize}`)
    .then(res => res.json());
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home filmsPerPage={filmsPerPage} />,
    loader: homeLoader,
    // 将参数存入路由配置的extra属性
    extra: { filmsPerPage },
  },
]);

这种方式适合参数需要和路由强关联的场景，灵活性也不错。

关键提醒：永远不要直接执行loader函数后赋值给路由的loader属性，必须传递函数本身，让React Router在合适时机调用它，这样useLoaderData才能正常工作。

内容的提问来源于stack exchange，提问作者D. Rattansingh