Javascript react 路由如何使用从加载器返回的数据

getReasonTypes函数需要返回defaulNewAPIs路由加载器函数的值才能返回到路由组件.

• 返回Promise链

  export function getReasonTypes() {
    return commonAxios // <-- return Promise to defaultNewAPIs
      .get('/api/ReasonTypes?activeOnly=true')
      .then(function (response) {
        console.log(response);
        return response.data; // <-- returned to getReasonTypes
      })
      .catch(function (error) {
        console.log(error);
        throw error;
      });
  }
  

• 使用async/await

  export async function getReasonTypes() {
    try {
      const response = await commonAxios.get('/api/ReasonTypes?activeOnly=true')
      console.log(response);
      return response.data; // <-- return value to defaultNewAPIs
    } catch(error) {
      console.log(error);
      throw error;
    };
  }
  

defaulNewAPIs加载器函数应等待getReasonTypes函数返回的解析值.

async function defaultNewAPIs() {
  const data = await getReasonTypes();
  return { data };
}

要读取已加载路径状态的组件应使用useLoaderData

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

const AppLayout = () => {
  const data = useLoaderData();

  ...
};

或者useRouteLoaderData个钩子.

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

import { useRouteLoaderData } from "react-router-dom";

const ReferralDetails = ({ status }) => {
  const data = useRouteLoaderData("root");

  ...
}