在任何渲染之前在ReactJs中获取数据

解

• 从Reaction-路由文档中，您可以使用loader

每条路由都可以定义一个"加载器"函数，以便在路由元素呈现之前向其提供数据.

• 然后可以使用use-loader-data在组件中使用此数据

保持清洁

• 您可以将加载器函数放在相关的组件文件中，然后导入到路由

"事件"数据的示例:

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import EventDetailPage, {
  loader as eventDetailsLoader,
} from "./pages/EventDetailPage";

//Create router
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    errorElement: <ErrorPage />,
    children: [
      { index: true, element: <HomePage /> },
      {
        path: "events",
        element: <EventsRootLayout />,
        children: [
          {
            index: true,
            element: <EventsPage />,
            loader: eventsLoader,
          },
          {
            path: ":eventID",
            loader: eventDetailsLoader,
            element: <EventDetailPage />,
          },
          

import { json, useLoaderData, useParams } from "react-router-dom";
import EventItem from "../components/EventItem";

function EventDetailPage() {
  const params = useParams();
  const data = useLoaderData();

  return <EventItem event={data.event} />;
}

export default EventDetailPage;

export async function loader({ request, params }) {
  const id = params.eventID;
  const response = await fetch("http://localhost:8080/events/" + id);

  if (!response.ok) {
    throw json({ message: "Could not fetch details" }, { status: 500 });
  } else {
    return response;
  }
}