Interface MetaFunction<Loader, MatchLoaders>

A function that returns an array of data objects to use for rendering metadata HTML tags in a route. These tags are not rendered on descendant routes in the route hierarchy. In other words, they will only be rendered on the route in which they are exported.

Type Parameters

  • Loader extends LoaderFunction | ClientLoaderFunction | unknown = unknown

    The type of the current route's loader function

  • MatchLoaders extends Record<string, LoaderFunction | ClientLoaderFunction | unknown> = Record<string, unknown>

    Mapping from a parent route's filepath to its loader function type

    Note that parent route filepaths are relative to the app/ directory.

    For example, if this meta function is for /sales/customers/$customerId:

    // app/root.tsx
    const loader = () => ({ hello: "world" })
    export type Loader = typeof loader

    // app/routes/sales.tsx
    const loader = () => ({ salesCount: 1074 })
    export type Loader = typeof loader

    // app/routes/sales/customers.tsx
    const loader = () => ({ customerCount: 74 })
    export type Loader = typeof loader

    // app/routes/sales/customers/$customersId.tsx
    import type { Loader as RootLoader } from "../../../root"
    import type { Loader as SalesLoader } from "../../sales"
    import type { Loader as CustomersLoader } from "../../sales/customers"

    const loader = () => ({ name: "Customer name" })

    const meta: MetaFunction<typeof loader, {
    "root": RootLoader,
    "routes/sales": SalesLoader,
    "routes/sales/customers": CustomersLoader,
    }> = ({ data, matches }) => {
    const { name } = data
    // ^? string
    const { customerCount } = matches.find((match) => match.id === "routes/sales/customers").data
    // ^? number
    const { salesCount } = matches.find((match) => match.id === "routes/sales").data
    // ^? number
    const { hello } = matches.find((match) => match.id === "root").data
    // ^? "world"
    }