Accessing Parent Route Data

Child routes can access loader data from parent routes using useRouteLoaderData. This is useful for sharing data like user info, config, or any data loaded by a parent without needing to reload it.

// routes/features/data/parent-data/main.tsx
import { Outlet } from "react-router";
import type { RouteLoaderArgs } from "@udibo/juniper";

export interface ParentLoaderData {
  parentMessage: string;
  loadedAt: string;
  sharedConfig: { theme: string; version: string };
}

export async function loader(_args: RouteLoaderArgs): Promise<ParentLoaderData> {
  return {
    parentMessage: "Hello from parent loader!",
    loadedAt: new Date().toISOString(),
    sharedConfig: { theme: "dark", version: "1.0.0" },
  };
}

export default function ParentLayout() {
  return (
    <div>
      <h2>Parent Route</h2>
      <Outlet />
    </div>
  );
}

// routes/features/data/parent-data/index.tsx
import { useRouteLoaderData } from "react-router";
import type { ParentLoaderData } from "./main.tsx";

export default function ChildRoute() {
  // Use the parent route's path as the route ID
  const parentData = useRouteLoaderData(
    "/features/data/parent-data"
  ) as ParentLoaderData;

  return (
    <div>
      <p>Message: {parentData.parentMessage}</p>
      <p>Theme: {parentData.sharedConfig.theme}</p>
    </div>
  );
}