useRouteLoaderData
概要
指定されたルートIDにより、特定のルートのloaderデータを返します。
ルートIDは自動的に作成されます。これは単に、拡張子を除いた、アプリフォルダからのルートファイルの相対パスです。
| ルートファイル名 | ルートID |
|---|---|
app/root.tsx | "root" |
app/routes/teams.tsx | "routes/teams" |
app/whatever/teams.$id.tsx | "whatever/teams.$id" |
import { useRouteLoaderData } from "react-router";
function SomeComponent() {
const { user } = useRouteLoaderData("root");
}
// routes.ts ファイルで、ルートIDを自分で手動で指定することもできます:
route("/", "containers/app.tsx", { id: "app" })
useRouteLoaderData("app");シグネチャ
function useRouteLoaderData<T = any>(
routeId: string,
): SerializeFrom<T> | undefinedパラメータ
routeId
loaderデータを取得するルートのIDです。
戻り値
指定されたルートのloader関数から返されたデータ、または見つからない場合はundefinedを返します。