这是我的应用程序 .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();
}
路由加载器是函数,不是数组。如果您需要调用两个加载器函数,那么我认为您可以创建第三个加载器函数来调用这两个函数并收集并返回它们的响应数据。
例子:
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();
...
}