アジェンダ

useLoaderDataは、React Routerのフックで、ルートに関連付けられたloader関数から取得したデータをコンポーネント内で利用するためのものです。簡単に言うと、ページの表示に必要なデータを非同期で取得し、そのデータを使ってコンポーネントをレンダリングするための仕組みです。

ここでは、useLoaderDataを使ってAPIからデータを取得し、それをコンポーネントで利用する最もシンプルな例をまとめます。
以下のようにデータを取得し、利用します。

loader関数でAPIからデータを取得。
ルート設定で、コンポーネントに対してloaderを設定。
useLoaderDataでloaderから返されたデータをコンポーネント内で利用。

この方法で、React Routerを使ってAPIのデータを簡単に取得し、レンダリングできます。

手順

1. `loader`関数の作成

loader関数は、データを取得する関数です。APIやモックデータからデータを取得し、そのデータをuseLoaderDataで利用します。

// loader関数
export const myLoader = async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const data = await response.json();
  return data; // データを返す
};

この例では、外部のAPI（https://jsonplaceholder.typicode.com/posts/1）からデータを取得しています。myLoader関数は、このAPIから取得したJSONデータを返します。

2. ルート設定

次に、React Routerのルートでloader関数を設定します。ここで、myLoaderをルートに関連付けます。

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import MyComponent from './MyComponent';
import { myLoader } from './myLoader';

const router = createBrowserRouter([
  {
    path: "/",
    element: <MyComponent />,
    loader: myLoader, // ここでloaderを指定
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

ここでは、"/"パスにアクセスしたときにMyComponentコンポーネントが表示され、同時にmyLoaderが呼び出されます。

3. コンポーネントで`useLoaderData`を使用する

MyComponentコンポーネントで、useLoaderDataを使ってloader関数から返されたデータを取得し、表示します。

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

function MyComponent() {
  const data = useLoaderData(); // loaderから取得したデータを使用

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.body}</p>
    </div>
  );
}

export default MyComponent;

参考

How to use loader function and useLoaderData hook [ remix js tutorial for beginners ] - YouTube