useRouteData

Reads data provided by a server component via provideRouteData(). This enables server components to pass serializable data to client components without prop drilling.

Import

import { useRouteData } from "catmint/hooks";

Signature

function useRouteData<T>(): T;

Parameters

This hook takes no parameters. The generic type parameter T specifies the expected shape of the route data.

Return Value

Returns the route data of type T that was provided by a parent server component via provideRouteData().

Throws an error if no route data has been provided. Ensure the server component calls provideRouteData() to supply data.

Examples

Reading route data

// DashboardClient.client.tsx
import { useRouteData } from "catmint/hooks";

interface DashboardStats {
  totalUsers: number;
  activeUsers: number;
  revenue: number;
}

function DashboardClient() {
  const stats = useRouteData<DashboardStats>();

  return (
    <div>
      <p>Total users: {stats.totalUsers}</p>
      <p>Active users: {stats.activeUsers}</p>
      <p>Revenue: ${stats.revenue}</p>
    </div>
  );
}

Server component providing data

// page.tsx (server component)
import { provideRouteData } from "catmint";
import { DashboardClient } from "./DashboardClient.client";

export default async function DashboardPage() {
  const stats = await db.getDashboardStats();

  provideRouteData(stats);

  return <DashboardClient />;
}

See Also

• provideRouteData
• useNavigation