React Router 如何使用从加载器返回的数据

Question

我正在致力于实现一个新的 React Router。我正在使用新的

createBrowserRouter

并想要实现一些

loader

api 调用。我已经将我的项目设置为正确进行这些 api 调用，但是我找不到任何有关如何实际处理这些数据的文档。

我想将响应数据传递到我的组件，但不清楚如何做到这一点。

我有一个包含此网络请求的 api 文件夹。

export function getReasonTypes() {
  commonAxios
    .get('/api/ReasonTypes?activeOnly=true')
    .then(function (response) {
      console.log(response)
      return response.data
    })
    .catch(function (error) {
      console.log(error)
    })
}

我在创建路由器时导入此功能：

function defaulNewAPIs() {
  const data = getReasonTypes()
  return { data }
}

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

ReactDOM.createRoot(document.getElementById('root')!).render(
  <GenReMsal>
    <React.StrictMode>
      <AuthenticatedTemplate>
        <RouterProvider router={router} />
      </AuthenticatedTemplate>
      <UnauthenticatedTemplate>
        <GenReLogin />
      </UnauthenticatedTemplate>
    </React.StrictMode>
  </GenReMsal>
)

上面的代码成功调用了我的api，并且根据控制台日志我可以看到它正确地获取了数据。如何将此数据传递到我的路由器元素中？

Answer 1

您在 AppLayout 组件中几乎完成了所有需要做的事情，就是调用 React 路由器 useLoaderData 钩子。 反应路由器文档