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

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

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

import { getProducts } from '../forStorage'

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

export async function loader() {
	const products = await getProducts();
	return { products };
}

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

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

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

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

これまでのレッスンの課題で作成したアプリケーションを使用してください。レッスンの内容を参考に、ファイル root.jsx に生徒データをロードする関数 loader を記述し、 main.jsxのルートオブジェクトに追加してください。