我正在尝试将加载程序函数数组发送到我的路由，它会抛出错误 Handler is not a funtion in a reactJs application

Question

这是我的应用程序 .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]
  },

在我的页面中，我正在通过 useLoaderData 获取数据

export const SkillsPage = ()=>{

  const {landingPageContentLoader,skillsLoader} = useLoaderData();
}

这是我收到的错误

Answer 1

路由加载器是函数，不是数组。如果您需要调用两个加载器函数，那么我认为您可以创建第三个加载器函数来调用这两个函数并收集并返回它们的响应数据。

例子：

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
  );

  return response;   
};

const skillsPageLoader = async () => {
  return Promise.all([landingPageContentLoader(), skillsLoader()]);
};

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

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

  ...
}