URL 세그먼트는 일반적으로 앱의 퍼시스턴트 데이터에 매핑되기 때문에 React Router 는 탐색 중에 데이터 로딩을 시작할 수 있는 기존의 데이터 로딩 후크를 제공합니다. 중첩된 경로와 결합하면 특정 URL의 여러 레이아웃에 대한 모든 데이터를 병렬로 로드할 수 있습니다.

<Route
  path="/"
  loader={async ({ request }) => {
    // loaders can be async functions
    const res = await fetch("/api/user.json", {
      signal: request.signal,
    });
    const user = await res.json();
    return user;
  }}
  element={<Root />}
>
  <Route
    path=":teamId"
    // loaders understand Fetch Responses and will automatically
    // unwrap the res.json(), so you can simply return a fetch
    loader={({ params }) => {
      return fetch(`/api/teams/${params.teamId}`);
    }}
    element={<Team />}
  >
    <Route
      path=":gameId"
      loader={({ params }) => {
        // of course you can use any data store
        return fakeSdk.getTeam(params.gameId);
      }}
      element={<Game />}
    />
  </Route>
</Route>

데이터는 useLoaderData 를 통해 컴포넌트에서 사용할 수 있습니다.

function Root() {
  const user = useLoaderData();
  // data from <Route path="/">
}

function Team() {
  const team = useLoaderData();
  // data from <Route path=":teamId">
}

function Game() {
  const game = useLoaderData();
  // data from <Route path=":gameId">
}

사용자가 https://example.com/real-salt-lake/45face3 링크를 방문하거나 클릭하면, 해당 URL 의 UI 가 렌더링되기 전에 세 개의 경로 로더가 모두 호출되고 동시에 로드됩니다.