React Router：如何将loader返回的数据传递给路由组件？

1. 修正API请求函数 #

你的getReasonTypes函数没有返回Promise，导致loader无法捕获异步请求结果。需要修改函数，让它返回完整的axios请求链：

export function getReasonTypes() {
  // 关键：return 整个Promise链
  return commonAxios
    .get('/api/ReasonTypes?activeOnly=true')
    .then(function (response) {
      console.log(response)
      return response.data
    })
    .catch(function (error) {
      console.log(error)
      // 抛出错误让React Router后续处理（可选）
      throw error;
    })
}

2. 调整loader函数处理异步逻辑 #

loader需要返回Promise，React Router会自动等待它解析完成。将defaulNewAPIs改为异步函数，用await获取API返回的数据：

// 改为async函数处理异步请求
async function defaulNewAPIs() {
  const data = await getReasonTypes();
  return data; // 直接返回数据，也可以包装成对象（比如return { reasonTypes: data }）
}

const router = createBrowserRouter([
  {
    path: '/:appTypeId?',
    element: <AppLayout />,
    loader: defaulNewAPIs,
    children: [
      {
        index: true,
        element: <ReferralDetails status="new" />,
      },
    ],
  },
])

3. 在组件中获取loader数据 #

在目标组件（比如ReferralDetails）中，使用React Router提供的useLoaderData钩子获取loader返回的数据：

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

function ReferralDetails({ status }) {
  const reasonTypes = useLoaderData(); // 获取loader返回的数据

  return (
    <div>
      {/* 在这里使用reasonTypes渲染内容 */}
      <h3>可用原因类型</h3>
      <ul>
        {reasonTypes.map(type => (
          <li key={type.id}>{type.name}</li>
        ))}
      </ul>
    </div>
  );
}

额外说明 #

• 如果loader返回的是对象（比如return { reasonTypes: data }），则需要解构使用：const { reasonTypes } = useLoaderData();
• 若要处理请求错误，可以在loader中抛出new Response()对象，然后给路由配置errorElement来展示错误页面。

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