React中向路由传递Loader函数数组报错：Handler is not a function

问题场景 #

在React应用中给路由的loader字段传递函数数组时，抛出“Handler is not a function”错误，相关代码如下：

路由配置（app.js） #

async function landingPageContentLoader() {
  const url = AppConstants.landingPageDataAPI;
  const response = await DataService.get(url, AppConstants.emptyString, AppConstants.emptyString)
  return response;   
}
async function skillsLoader() {
  const url = AppConstants.exploreSkillsGetAPI;
  const response = await DataService.get(url, AppConstants.emptyString, AppConstants.emptyString);
  console.log(response);
  return response;   
}
const router = createBrowserRouter([
  
  {
    path: AppConstants.skills,
    element: <SkillsPage/>,
    loader: [landingPageContentLoader, skillsLoader]
  },
]);

组件中获取数据 #

export const SkillsPage = () => {
  const {landingPageContentLoader, skillsLoader} = useLoaderData();
}

错误截图 #

解决方案 #

React Router的loader属性仅支持单个函数，无法直接接收函数数组。要实现多请求加载的效果，需创建一个合并的loader函数，在内部统一处理多个异步请求：

1. 创建合并的loader函数
   用Promise.all并行执行多个请求，提升加载效率，最后返回结构化的结果：

   async function combinedSkillsLoader() {
     const [landingPageData, skillsData] = await Promise.all([
       landingPageContentLoader(),
       skillsLoader()
     ]);
     return {
       landingPageData,
       skillsData
     };
   }
   

2. 更新路由配置
   将路由的loader替换为合并后的函数：

   const router = createBrowserRouter([
     {
       path: AppConstants.skills,
       element: <SkillsPage/>,
       loader: combinedSkillsLoader
     },
   ]);
   

3. 调整组件数据获取逻辑
   对应合并函数返回的对象结构，解构获取数据：

   export const SkillsPage = () => {
     const { landingPageData, skillsData } = useLoaderData();
     // 后续业务逻辑处理
   };
   

原因说明 #

React Router要求loader必须是一个返回Promise的函数，直接传递数组时，框架会尝试将数组作为函数执行，从而触发“不是函数”的错误。通过合并函数统一管理多请求，既符合Router的API规范，也能更清晰地组织数据返回结构。

内容的提问来源于stack exchange，提问作者Ruchi Pareek