React Routerにおけるルートデータローダー

前回のレッスンでは、ストレージから 商品データを取得しました。次に、 このデータをルート要素にロードする 必要があります。そのために、 ローダー関数 (loader) が使用されます。 さっそく作成してみましょう。

root.jsx を開き、 forStorage.js から getProducts をインポートする行を追加します:

routes/root.jsximport { getProducts } from '../forStorage'

インポート文の直後で、関数 Root の前に、関数 loader のコードを記述します。 この関数は、getProducts を介して ストレージからの商品データを返します。 通常、このような関数は別ファイルに記述すべきですが、 今回は少し手を抜いて、警告は無視してください:

routes/root.jsxexport async function loader() {
  const products = await getProducts();
  return { products };
}

次に、作成したローダーのインポートを main.jsx に追加しましょう。 このローダーはルート用なので、 rootLoader と名付けます:

main.jsximport Root, { loader as rootLoader } from './routes/root';

そして、ルートオブジェクトの loader プロパティに追加します:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
]);